I'm attempting to create a grid using PureCSS and have discovered a behavior I don't understand. I want the left part of the grid to take up 1/3 of the page and the right the remaining 2/3:
# index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test PureCSS</title>
<link rel="stylesheet" href="http://yui-s.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://yui-s.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="header">
<div class="home-menu pure-menu pure-menu-horizontal">
<a class="pure-menu-heading" href="#">Test Page</a>
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">Home</li>
<li class="pure-menu-item">Tour</li>
<li class="pure-menu-item">Sign Up</li>
</ul>
</div>
</div>
<div class="pure-g">
<div class="l-box-lrg pure-u-1 pure-u-md-1-3">
<div class="content-wrapper">
<div class="content">
1-3
</div>
</div>
</div>
<div class="l-box-lrg pure-u-1 pure-u-md-2-3">
<div class="content-wrapper">
<div class="content">
2-3
</div>
</div>
</div>
</div>
</body>
</html>
Here's the CSS:
# base.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.home-menu {
padding: 0.5em;
text-align: center;
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.l-box-lrg {
padding: 2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.content-wrapper {
/* These styles are required for the "scroll-over" effect */
position: absolute;
top: 87%;
width: 100%;
min-height: 12%;
z-index: 2;
background: white;
}
#media (min-width: 48em) {
.content {
padding: 1em;
}
}
In Chrome, which uses Blink, this page renders as expected. But in Firefox, which is Gecko-based, the left 1-3 div gets stacked on top of the right 2-3 div. In the past, problems like this were caused by having a space at the end of a div. However, I've checked my code and it doesn't have any extra spaces. I read somewhere about how these rendering engines handle display:block versus display:inline-block differently so maybe that has something to do with it. But I would think that if PureCSS was developed by Yahoo, they would have factored any rendering engine differences into their framework so that this wouldn't happen.
Most probably its because of the user agent stylesheet try and check if the body doesnt have padding or margin applied to it
Related
My responsive site's initial zoom is incorrect on mobile:
Sample HTML is below (and in this live Codepen demo).
You can see that I'm already using <meta name="viewport" content="width=device-width, initial-scale=1">.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.ctaGrabber{
word-wrap: break-word;
font-size: 30px;
font-weight: bold;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 0px;
padding-left: 30px !important;
padding-right: 30px !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
}
</style>
</head>
<body class="">
<div class="container mainContainer hideWhenShowingForm">
<div class="row">
<div class="col-md-12 text-center">
<h1>“Here is a great title about a whole bunch of cool stuff”</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 text-center presenters">
left col
</div>
<div class="col-md-6 text-left">
<div class="text-center">
<a href="#" class="btn btn-lg btn-primary ctaGrabber" data-hiddenForm="#hiddenCrmForm">
<span>YES! Watch The Training Now!</span>
<!-- <span class="elButtonSub" style="font-size: 14px; display: block;"></span>-->
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Why does my a.ctaGrabber button's font-size not cause the mobile "zoom" to be wider?
How can I either force the viewport zoom factor to honor this large font-size OR wrap the button text (without me specifying a button width)?
Ahhh, I figured it out:
I needed to add white-space: normal; to my .ctaGrabber style to override the white-space: nowrap; style of .btn in Bootstrap's buttons.less file.
Update:
The way to narrow down what element is causing the horizontal scroll bar is to use the Inspect panel and remove elements one at a time.
Then, once you’ve figured out the offending element, remove/edit one CSS property at a time.
In my case just recently, I found that an img was using the Bootstrap img-responsive class but also had max-width: 450px;, which overrode Bootstrap's max-width: 100%;. The solution (https://stackoverflow.com/a/50194061/470749) was to wrap the img in a div with this class:
.imgMaxWidthWrapper{
max-width: 450px;
margin: auto;
}
I have a simple tag with a banner and a border at the bottom. How can I stop sliding these two elements on zooming? I was looking for a way to get the two elements intact on zoom in and out. Even after a few hours of search, i couldn't get the desired output. I tried this and one more post which says to change from px to em.
My html tag:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height= 160">
</div>
<div id="container-border">
</div>
</body>
css:
#header
{ padding:0 20px;
display:block;
margin:0 auto;
background: #D6D6D6 url(background.jpg) repeat-x;
height: 205px;
width: 1500px;
position: center;
}
#container-border {
width: 1538px;
height:900px;
margin-left:260px;
border-color: black;
border-width: 1px;
border-style: solid;
}
You first need to wrap the content in a containing DIV
HTML
<div class="site-content">
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height="160">
</div>
<div id="container-border">
</div>
</div>
Note the new DIV .site-content. This is where you would center the website content and control the website contents width.
Here's my codepen: https://codepen.io/arlcode/pen/aRpWZo
I would also recommend not using static width/height for mobile dynamic purpose. You're also going to want to use classes more then ID's because ID's are specific but classes allow you to manipulate multiple DIVs at once.
Body properties such as different font works but div tag properties like in #mainpic or #header just don't work
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
#mainpic {
<img src="../image/cutmypic.png";
alt="image not found";
/>background-position: "centre";
position: absolute;
bottom: 0;
center: 0;
}
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“ content”>/div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
Okay first up: use classes not IDs. Good css never has any ids in it (except for some very very specific cases)
Secondly, you got html in your css, so that does not work.
Thirdly, you cannot nest css selectors. Instead of
.wrapper {
/* some css */
.element {
/* some css */
}
}
you have to write
.wrapper {
/* wrapper css */
}
.wrapper .element {
/* element css */
}
Close all brackets properly in the CSS code, move the img tag from the CSS to the HTML code and don't use invalid properties or values ("centre", "center") in your CSS.
Also, you are using lots of typographical quotes in your codes. You have to replace all these with regular quotes - it won't work otherwise.
body {
font-family: Calibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"><img src="../image/cutmypic.png" ; alt="image not found" ; /></div>
<div id=“ content”></div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
/*center:0;*/
}
#header {
color: white;
}
<body background="image/bg.jpg">
<div id=“container”>
<div id=“header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“content”></div>
<div id=“navigation”> a link to the other web page</div>
<div id=“footer”> contains your name and student number</div>
</div>
</body>
The 1st your problem is that you have several typos.
For example, <div id = “content”>/div>.
The 2nd problem is that you can not use HTML tag in CSS.
The 3rd problem is that there is no syntax center in CSS.
And when you use background-position, you don't need to use " " , and you should write center NOT centre.
I am using media queries to remove indent on li when the screen size is 500 width here the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="row" style="margin-left: 2px; margin-right: 1px;">
<div class="media">
<div class="date pull-left">
<p>7<span>June</span></p>
</div>
<div class="media-body">
<p><strong>xxx</strong> xxxx/p>
<p>Key Points:</p>
<ol>
<li>xxx</li>
<li>xxx</li>
<li>xxxx.</li>
<li>sda</li>
<li>dasdaS</li>
<li>ASdaSDa</li>
<li>aSDas.</li>
</ol>
<img src="/static/images/YouTube-icon-full_color.gif">
</div>
</div>
</div>
</body>
</html>
and the corresponding css:
#media (min-width: 600px){
ul{
margin: 0px;
padding: 0px;
}
li{
margin: 0px;
padding: 0px;
}
}
Link to JS bin paste
http://jsbin.com/xoqufugo/9/
My issue is its not working.
you need to do below changes. Here is the demo
change min-width: 600px to max-width: 600px
0l to ol
Hey guys I want my two #previews to float side by side. I have tried adding float:left but it doesn't work. At the moment they are just sitting on top of each other. All my code is below, thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
background: #F4F4F4;
font-family: 'Lobster', cursive;
}
#logo {
background: url(logo.png);
width: 300px;
height: 75px;
margin: 70px 200px;
}
#container {
width: 1300px;
}
h2 {
text-align: center;
font-size: 29px;
color: #444;
}
p {
text-align: center;
font-size: 22px;
color: #444;
}
.line {
background: url(line.png);
width: 972px;
height: 1px;
margin: 0 auto;
}
#previews {
border: 5px solid #FFF;
width: 300px;
margin: 50px 200px;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg" /></div>
<div id="previews"><img src="preview.jpg" /></div>
</div>
</body>
</html>
Float them both to the left and it will work. You'll also need to clear them then.
A few things:
a) DIVs are block-level. You would need to define them as display:inline; for float to work.
b) You should be using class instead of ID. An ID is supposed to appear once on a page only. Classes can appear as many times as you wish.
That's all:
<div id="previews">
<img src="preview.jpg" style="float:left;" />
<img src="preview.jpg" style="float:left;" />
</div>
You can also use this:
#previews img {
float:left;
}
<div id="previews">
<img src="preview.jpg" />
<img src="preview.jpg" />
</div>
<html lang="en"><head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>body {background: #F4F4F4;font-family: 'Lobster', cursive;}#logo {background: url(logo.png);width: 300px;height: 75px;margin: 70px 200px;}#container {width: 1300px;}h2 {text-align: center;font-size: 29px;color: #444;}p {text-align: center;font-size: 22px;color: #444;}.line {background: url(line.png);width: 972px;height: 1px;margin: 0 auto;}#previews {border: 5px solid #FFF;width: 300px;display:inline-block; vertical-align:top; margin:50px 100px;}</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg"></div>
<div id="previews"><img src="preview.jpg"></div>
</div>
</body></html>
You simply add display:inline-block; vertical-align:top; under the CSS for #previews. You will also need to reduce the amount of horizontal margin used for #previews because the width of the container is only 1300px.