I use a CSS-Grid with 12 colums and now I need pull and push class's. Can someone help me to extend my grid with push an pull class.
What I've got:
.row { margin:0 auto; width:1200px; overflow:hidden; }
.row .row { margin:0 -20px 0 -20px; width:auto; display:inline-block; }
.grid_1 { width:60px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_2 { width:160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_3 { width:260px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_4 { width:360px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_5 { width:460px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_6 { width:560px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_7 { width:660px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_8 { width:760px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_9 { width:860px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_10 { width:960px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_11 { width:1060px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_12 { width:1160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.offset_1 { margin-left:120px; }
.offset_2 { margin-left:220px; }
.offset_3 { margin-left:320px; }
.offset_4 { margin-left:420px; }
.offset_5 { margin-left:520px; }
.offset_6 { margin-left:620px; }
.offset_7 { margin-left:720px; }
.offset_8 { margin-left:820px; }
.offset_9 { margin-left:920px; }
.offset_10 { margin-left:1020px; }
.offset_11 { margin-left:1120px; }
Got it.
So if someone need.
/* Push & Pull */
.push_1 { left: 100px; position:relative; }
.push_2 { left: 200px; position:relative; }
.push_3 { left: 300px; position:relative; }
.push_4 { left: 400px; position:relative; }
.push_5 { left: 500px; position:relative; }
.push_6 { left: 600px; position:relative; }
.push_7 { left: 700px; position:relative; }
.push_8 { left: 760px; position:relative; }
.push_9 { left: 860px; position:relative; }
.push_10 { left: 960px; position:relative; }
.push_11 { left: 1100px; position:relative; }
.push_12 { left: 1200px; position:relative; }
.pull_1 { left: -100px; position:relative; }
.pull_2 { left: -200px; position:relative; }
.pull_3 { left: -300px; position:relative; }
.pull_4 { left: -400px; position:relative; }
.pull_5 { left: -500px; position:relative; }
.pull_6 { left: -600px; position:relative; }
.pull_7 { left: -700px; position:relative; }
.pull_8 { left: -800px; position:relative; }
.pull_9 { left: -900px; position:relative; }
.pull_10 { left: -1000px; position:relative; }
.pull_11 { left: -1100px; position:relative; }
.pull_12 { left: -1200px; position:relative; }
Related
For the life of me, I cannot figure out why this code can't work. I am trying to set up a personal website and before I put my content in place, I want to have all of the areas setup and have it be responsive. I want a 3x3 grid of boxes where I can display my work (div id = container), but every time I introduce the ninth div block specifically (p9), the arrangement breaks for seemingly no reason. Here's the code for the desktop layout:
body{
background-color:#FFB51E;
width:100%;
height:1000px;
position:absolute;
}
/* unvisited link */
a:link {
text-decoration:none;
background-color: #2A56C4;
color:#fff;
padding:15px;
border-radius:26px;
}
/* visited link */
a:visited {
color: fff;
}
/* mouse over link */
a:hover {
background-color:#FF581E;
}
/* selected link */
a:active {
color:#FF581E;
background-color:fff;
}
#header{
width:80%;
height:160px;
margin: 0 auto;
position:relative;
display:block;
}
.left{
color:#fff;
text-align: left;
margin-top:25px;
margin-bottom:15px;
font-size:36px;
position:relative;
float:left;
width:310px;
display:block;
}
.right{
text-align:right;
width:300px;
float:right;
padding-top:5px;
margin-bottom:15px;
font-size:24px;
position:relative;
float:right;
z-index:2;
}
.works{
text-align:center;
position:relative;
float:left;
left:30%;
font-size:25px;
width:100px;
display:inline-block;
}
.about{
text-align:center;
position:relative;
float:right;
right:30%;
font-size:25px;
width:100px;
display:inline-block;
}
.border{
background-color:none;
width:100%;
height:85px;
margin:0 auto;
border:none;
border-bottom: 6px solid #000;
float:none;
position:relative;
}
/*body stuff*/
#container{
position:static;
display:block;
margin:0 auto;
font-size:0px;
margin-top: -10px;
width:80%;
height:550px;
}
.p1{
background-color: aliceblue;
color:000;
font-size:12px;
width:230px;
z-index: 1;
float:left;
margin: 0px;
padding:0px;
}
.p2{
background-color: red;
width:230px;
z-index: 1;
float:left;
padding:0px;
}
.p3{
background-color: blue;
width:230px;
z-index: 1;
float:left;
padding:0px;
margin:0px;
}
.p4{
background-color: purple;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p5{
background-color: green;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p6{
background-color: brown;
width:230px;
z-index: 1;
float:left;
padding:0px;
margin-top: 20px;
}
.p7{
background-color: purple;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p8{
background-color: green;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p9{
background-color: green;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
I'm about five minutes from drop kicking my laptop out the window, so any kind of help would be greatly appreciated! Let me know if you need code for the html as well.
Something to get you started. I don't have the HTML you use so I focused on the container.
I defined it as a flexbox which makes it responsive. Each item has a width of 33% and a height of 30px (for demo purpose).
/*body stuff*/
#container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
margin-top: -10px;
width: 80%;
}
[class^="p"] {
width: 33%;
height: 30px;
}
.p1 {
background-color: aliceblue;
}
.p2 {
background-color: red;
}
.p3 {
background-color: blue;
}
.p4 {
background-color: purple;
}
.p5 {
background-color: green;
}
.p6 {
background-color: brown;
}
.p7 {
background-color: yellow;
}
.p8 {
background-color: red;
}
.p9 {
background-color: green;
}
<div id="container">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
<div class="p5"></div>
<div class="p6"></div>
<div class="p7"></div>
<div class="p8"></div>
<div class="p9"></div>
</div>
First: I just added this CSS rule at the bottom (to overwrite the other rules) and now it works as desired:
#container > div {
width: 230px;
margin-top: 20px;
}
https://jsfiddle.net/bhzw7o60/1/
Second: For elements that have common parameters (like your floated elements which all have the same width, size and margin-top) you should use a * common* class for all of them and additional seperate classes for the individual elements which only contain the differing properties. My above rule does this for width and margin-top. You could also add the height to it, and only define the background-color in the individual classes. BTW: z-index does nothing in this case, you can delete that from all the rules.
I am using blogger and has a custom template I added a header it works fine but the header is not resizing on mobile template
My site is https://untoldstoriesofpakistan.blogspot.com
I think this is my css for header
Header
div#navigation-wrapper {
width: 56%;
float: right;
}
#header {
width: 30%;
background-size: contain;
}
#logo {
text-align:center;
padding:0px 0;
height: 10px;
background-size: contain;
}
and this is my media css
#media only screen and (max-width: 767px) {
.container {
width:300px;
}
#navigation-wrapper {
display:none;
}
.slicknav_menu {
display:block;
}
#logo img {
max-width:300px;
height:auto;
}
.post-header h1 a, .post-header h2 a, .post-header h1 {
font-size:22px;
letter-spacing:2px;
}
.post-image img {
width:300px;
height:auto;
}
.post-image.audio iframe {
width:300px;
height:auto;
}
.item-related {
width:320px;
margin-bottom:30px;
}
.share-box {
width:46px;
height:36px;
line-height:36px;
margin:0 4px;
}
.post-pagination .prev-post {
width:300px;
}
.post-pagination .next-post {
width:300px;
}
#respond textarea {
width:90%;
}
.thecomment .author-img {
display:none;
}
#widget-area .widget, #sidebar .widget {
width:300px;
margin-right:32px;
float:left;
margin-bottom:35px;
}
#footer-logo img {
max-width:300px;
height:auto;
}
#footer-social a i {
height:28px;
width:28px;
line-height:28px;
margin-right:0;
font-size:12px;
}
#footer-social a {
margin:0 5px;
}
#footer-social a span{
display:none;
}
.wpcf7 textarea {
width:94%;
}
.sp-grid li {
width:320px;
}
.sp-grid li:nth-child(3n+3) {
margin-right:0;
}
.sp-grid li:nth-child(2n+2) {
margin-right:0;
}
.container.sp_sidebar #main {
width:300px;
margin-right:0;
}
.container.sp_sidebar #sidebar {
width:300px;
}
.container.sp_sidebar #sidebar .widget {
width:300px;
}
.container.sp_sidebar .item-related {
width:300px;
margin-bottom:30px;
}
.col-md-6.site-top-menu-right.text-right {
display: none;
}
div#sidebar-narrow {
display: none;
}
div#main-part {
float: left;
width: 310px;
}
}
You need to change header image size. Search your code for
#media only screen and (max-width: 767px) and (min-width: 480px){
#logo img {
max-width: 480px;
height: auto;
}
}
#media only screen and (max-width: 767px) {
#logo img {
max-width: 300px;
height: auto;
}
}
img#Header1_headerimg {
width: 180px;
height: 55px;
float: left;
}
and replace it with
img#Header1_headerimg {
width: auto;
height: 50px;
float: left;
}
Change the code in css with this one :
#logo img {
max-width: 10em;
height: auto;
}
I am making a responsive site sandbox.mercomcorp.com. In landscape mode the only page that moves horizontally is the home page. At one point nothing moved so I am guessing it is something on the homepage that may be over the width:100; I have tried everything overflow:hidden overflow-x:hidden none of that is working. Attched is my css
#phone {font-size:18px; }
p.serviceheader {font-size:18px; color:#464646;}
#servicetext {margin-top:-227px; margin-left:15px; color:#ffffff;}
#servicelink {margin-top:-4px; margin-left:15px}
#securitylink {margin-top:20px; margin-left:2px}
#networkinfrastructurelink {margin-top:-20px; margin-left:-2px}
#itlink {margin-top:-20px; margin-left:8px}
#datalink {margin-top:46px; margin-left:8px; color:#ffffff;}
#personnellink {margin-top:6px; margin-left:15px}
#hometext {font-size:31px; text-align:right; line-height:1.5; font-weight:bold; margin-top:-25px;}
#abouthome {margin-left:20px; float:left;}
#contacthome {font-size:23px; color:#464646; font-weight:bold;}
#prefooter {color:#464646; font-size:23px;}
#careershome {color:#464646; font-size:18px; margin-top:-5px;}
#jointeam {color:#464646; font-size:23px; margin-top:35px;}
#benefits {color:#464646; font-size:23px; margin-top:7px;}
#joinus {color:#464646; font-size:23px; margin-top:38px; }
#employees {color:#464646; font-size:18px; margin-top:10px; line-height:20px;}
p.corporateoffice {font-size:20px; color:#464646;}
p.officetext {color:#464646;}
#footer-links {font-size:12px;}
#chamberlogo {margin-top:10px; margin-left:28px;}
#sbalogo {margin-left:3px;margin-top:30px;}
#bicsilogo {margin-left:53px;}
#alliance {margin-left:15px;}
#mbchamber {margin-left:3px;}
#pmilogo {margin-left:55px;}
.prefooterlink a {color:#464646;}
#afcealogo {margin-bottom:-9px; margin-left:30px;}
#bbb {margin-left:17px;}
#infocommlogo {margin-left:40px;}
h1.relatedpgs {font-size:24px; color:#990812; margin-left:-8px;}
h1.pheader {font-size:26px;}
.customheader {margin-top:-60px;}
.bodycontentalign {margin-left:11px;}
.navalign {margin-top:-15px; margin-left:11px;}
.topphone {margin-top:-15px; margin-left:115px;}
.socialicons {margin-top:-32px; margin-left:60px;}
.footercontactinfo {background:url('/wp-content/uploads/2012/05/ragedge-right.gif') repeat-y scroll right top #ECECEC;
color: #5a5858;
float: left;
min-height:260px;
width: 260px;
}
.footerlogos {background:url('/wp-content/uploads/2012/05/ragedge-left.gif') repeat-y scroll left top #ECECEC;
color: #5A5858;
float: left;
min-height:260px;
width: 680px;
margin-left:-95px;
}
.innerpagenav {background-color:#ececec;}
#block-69 {margin-top:-15px;}
#block-72 {margin-top:-74px; margin-left:-1px;}
#block-73 {margin-top:-70px; margin-left:-19px; background-color:#000000; color:#ffffff;}
#block-372 {margin-top:-55px;}
#block-370 {margin-top:-45px;}
#block-25 {margin-top:25px;}
#datacentertext {margin-top:-245px; margin-left:10px; color:white;}
#itintegrationtext {margin-top:-245px; margin-left:10px; color:white;}
#securitytext {margin-top:-245px; margin-left:10px; color:#ffffff;}
#networkinfrastructuretext {margin-top:-245px; margin-left:10px; color:#ffffff;}
#vtctext {margin-top:-245px; margin-left:5px; color:#ffffff;}
/*regular site css*/
.container
{
/*text-align:left;
display:inline-block;
width:100%;
height:auto;
overflow: hidden; */
background-color:white;
display:inline-block;
height:100%;
width: 100%;
/*border: solid 1px #aaa;*/
text-align: left;
font-size: 1em;
/*letter-spacing:px; */
/*white-space: nowrap; */
/*line-height: 12px; */
}
.square
{
/*margin:auto;
width:20%;
text-align:left;
display:inline-block;
float:left;*/
width:19.5%;
margin:auto;
/* border: solid 1px #ccc; */
display: inline-block;
vertical-align:middle;
}
.words
{
background-color:#990913; color:white;
/*display:inline-block;*/
width:12.85em;height:15em;
}
#block-72 li.widget
{
margin-bottom:2%;
}
.title
{
/*display:inline-block;*/
font-size:18px;
padding-bottom:5px;
/*color:#444444;*/
}
#block-73 li.widget
{
margin-top:5%;
}
#block-66/*phone numbers*/
{
/*background-color:purple;*/
position:relative;
top:-10px;
margin-left:105px;
}
#block-67
{
padding-top:5%;
}
#block-52
{
padding-top:15px;
}
a.linktext
{
color:#464646 !important; font-size:20px; text-decoration:underlined;
}
a.linktext1
{
color:#464646 !important; font-size:20px; text-decoration:underlined;
}
a.linktext2
{
color:#464646 !important; font-size:20px; text-decoration:underlined;
}
.fb-hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.corporateoffice
{
color:#464646;
font-size:20px;
}
.officetext
{
color:#464646;
}
#media screen and (min-width: 770px)
{
.hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
a.linktext1
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
}
/*#media screen and (min-width: 768px)and (orientation:portrait)
{
.container
{
height:100%;
width:100%;
text-align:center;
background-color:white;
display:inline-block;
}
.square
{
margin:auto;
width:15em!important;
text-align:center;
display:inline-block;
}
.words
{
width:100%;
}
a.linktext
{
color:#464646 !important; font-size:17px; text-decoration:underlined;
}
a.linktext1
{
color:#464646 !important; font-size:17px; text-decoration:underlined;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.centerlink
{
text-align: center;
}
#block-65
{
margin:-65 0 0 0 ;
position:absolute;
left:75px;
}
#block-66
{
background:blue;
position:absolute;
top:484px;
}
}
*/
#media only screen and (max-width: 500px)and (orientation:landscape)/*iphone 4*/{
.container
{
width:100%;
text-align:center;
background-color:white;
}
.square
{
margin:auto;
width:15em !important;
text-align:left;
}
.fb
{
position:relative;
/*top:-80px!important;*/
/*right:20px;*/
background:white;
z-index:3;
}
.words
{
width:100%;
height:203px!important;
text-align:center;
}
/*.topfooter
{
color:blue!important;
}*/
.botfooter
{
float:right;
position:absolute;
top:20px;
right:-225px!important;
}
.officetext
{
font-size:12px!important;
}
.coporateoffice
{
font-size:14px!important;
}
#employees
{
width:100%;
margin:0 ;
padding: 0;
}
.contact1{
position:absolute;
top:2050px!important;
margin-top:0px;
/*margin-top:100px!important;*/
}
}
#media screen and (max-width: 680px) and (orientation:landscape)/*landscape small phone*/
{
#wrapper-4,#wrapper-5,#wrapper-9,#wrapper-10,#wrapper-11,#wrapper-12,#wrapper-13,#wrapper-14,#wrapper-15,#wrapper-16,#wrapper-17/*stops from scrolling horizontal*/
{
width:auto;
overflow: hidden;
maxwidth:auto;
padding :0.5em;
}
.hide img /*logo*/
{
width:68%;
height: 185px;
/*display: block;*/
margin: auto !important;
}
.container
{
/* height:100%;*/
width:100%;
text-align:center;
background-color:white;
/*display:inline-block;*/
}
.square
{
margin:auto;
width:20em;
text-align:left;
/* display:inline-block;*/
}
.words
{
width:100%;
font-size:16px;
height:145px;
text-align:center;
}
#block-72 li.widget
{
margin-bottom:2%;
}
.title
{
/*display:inline-block;*/
font-size:18px;
padding-bottom:5px;
/*color:#444444;*/
}
#block-73 li.widget
{
margin-top:5%;
}
#block-66
{
width:100%
display:inline;
font-weight:bold;
posititon:absolute;
left:-25px;
top:5px;
letter-spacing:2px;
white-space:nowrap;
font:OpenSans-Semibold;
}
.phonenav
{
font-size:20px!important;
line-height:200%;
}
.insideimg
{
/* align:center;*/
/* position:absolute;*/
/*top:300px;*/
height:auto;
width:300px;
float:right;
}
/*.officetext
{
position:absolute;
top:500%;
width:100%;
font-size:20px;
white-space:nowrap;
color:red;
}*/
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.centerlink {
text-align: center;
}
#block-38
{
margin:0;
position:absolute;
top:1625px;
width:100%;
}
.corporateoffice
{
font-color:black!important;
font-size:20px!important;
white-space:nowrap !important;
}
.officetext
{
font-size:18px!important;
}
/* .fb
{
position:absolute;
left:2px;
text-align:right;
background:white;
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}*/
.fb-hide
{
position:absolute;
left:2px;
text-align:right;
background:white;
/* background-color:white;
padding:right:40px;
position:absolute
z-index:-1;
*/
}
#block-67
{
display:inline-block;
background-color:white!important;
position:relative;
left:235px;
top:20px;
z-index:2;
}
/*.fb
{
background:white;
}
*/
a.linktext
{
color:#464646 !important; font-size:20px; text-decoration:underlined;
}
a.linktext1
{
color:#464646 !important; font-size:20px; text-decoration:underlined;
}
.block-type-hwr-contact #hwr-contact-27 .hwr-form-title {
line-height:90%;
}
.topfooter
{
margin:0 0 0 0 ;
position:absolute;
top:80px!important;
background:transparent
}
.botfooter
{
margin:0 0 0 0;
float:right;
position:absolute;
top:1px;
right:-330px;
background:transparent;
}
.contact {
position:absolute;
top:640px;
margin-top:100px!important;
}
}
#media only screen (device-height : 568px) and (device-width : 320px)and (-webkit-min-device pixel-ratio: 2)and (orientation : landscape)/*iphone 5*/
{
.container
{
/* height:100%;*/
width:100%;
text-align:center;
background-color:white;
/*display:inline-block;*/
}
.square
{
margin:auto;
width:15em;
text-align:left;
/* display:inline-block;*/
}
.botfooter
{
float:right;
position:absolute;
top:2px;
right:20px;
}
}
#media screen and (min-width: 320px) and (max-width: 480px)/*small devices*/
{
.hide/*logo*/
{
margin-top:10%;
margin-bottom:2px;
display:block;
}
a.linktext2
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.container{
width:100%;
text-align:left;
height:auto;
background-color:white;
}
.square{
margin:auto;
width:100%;
text-align:left;
display:inline-block;
background-color:white;
}
.words
{
color:white;
font-size:18px;
text-align:center;
background-color:#990913;
width:100%;
height:150px;
}
.title
{
width:100%;
}
#block-73 li.widget
{
margin-top:30%;
}
#block-66
{
position: relative;
top: 55px;
padding-left:60%;
font-weight:bold !important;
z-index:2;
line-height:4px;
}
.phonenum
{
background-color:white;
/*padding:right:40px;*/
position:absolute;
top:-3px;
z-index:-1;
}
.insideimg
{
/* align:center;*/
/* position:absolute;*/
/*top:300px;*/
height:120px;
width:140px;
float:right;
}
.centerlink {
text-align: center;
}
.footer
{
color:black!important;
font-size:20px;
}
.fb
{
background:white;
}
.fb-hide
{
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.insideimg
{
/* align:center;*/
/* position:absolute;*/
/*top:300px;*/
height:auto;
float:right;
}
}
Disable horizontal scrolling is quite easy. Just add the following CSS:
html, body {
width: 100%;
overflow-x: hidden;
}
You have to add this styles to the html and body tag to work in all browsers.
The problem is the fixed width of 680px you assigned to .footerlogos. Just change it from 680px to auto.
You could solve this with Javascript as well!
document.getElementById('body').style.overflowX = 'hidden';
Two problem plaguing me for a few hours now. I want to get my menu text to left align and also would like to increase the text size sub cats in the menu
http://www.acuity-sports.com/
Any help on what I need to edit would be great.
Here is my .css for the header
#yt_menuwrap { background: url(../images/bkg_main_nav.png) left 53px repeat-x; margin- top: -51px; }
#yt_mainnav,
#yt_mainnav_mobi { display:table; margin: 0 auto; }
#yt_mainnav_mobi select { margin:0; }
#menu_split { clear: left; }
.header-top { height: 78px; /* position: relative; z-index:3; */ }
.main-top{ }
.main-top .herader-top{ background:none; }
.header-logo { position:absolute; top:0; }
.header-logo a { position:relative; width:auto; height:auto; }
.header-bottom { height: 70px; /* position:relative; z-index: 4; */ box-shadow: 0 0 3px 2px #CCC; }
.header-cirlce{ position:relative; text-align:center; height:0px; z-index:1; display:none; }
.header-cirlce .inner-circle{ width:193px; height:57px; display:inline-block; position:relative; overflow:hidden; }
.header-cirlce .inner-circle .header-circle-logo{
position:absolute;
width:210px;
height:210px;
border-radius:225px;
background-position:21% 54%;
box-shadow:3px 0px 7px 0 #000000;
z-index:1;
left:-10px;top:-160px;
}
.header-cirlce .inner-circle .header-circle-content{
position:absolute;
bottom:14px;
left:5px;
width:180px;
height:50px;
display:inline-block;
z-index:2;
background:url(../images/bg-circle-logo.png) no-repeat center center transparent;
}
I fixed it thank god..
I had to edit my theme.css
#yt_mainnav,
#yt_mainnav_mobi { display:table; margin: 0 auto; }
and remove the 0 auto;
to this
#yt_mainnav,
#yt_mainnav_mobi { display:table; margin: }
I want this image in the html tag to only fill the max-width of 320px like it's supposed to. However it's going beyond that. Horizontal scroll bars show up and image tiles for 166 more pixels. In the IOS simulator and my ipone All the other elements span the width correctly.
#media only screen and (max-width : 320px) {
html {
margin:0;
padding:0;
background: url('../_images/iphoneCardboard_flat.png')repeat;
}
Update: These are some tags that might be relevant.
#band1 {
position: absolute;
top:0;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png');
z-index:-1;
}
.barbLogo {
position: absolute;
top:3px;
margin-left:165px;
width:320px;
}
#band2{
position: absolute;
top:-75px;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png');
z-index:-1;
}
#gridBgContainer{
position: absolute;
margin:0;
top:50px;
left:0;
height:200px;
background:url('../_images/gridBg.png');
background-repeat: repeat;
display: table;
z-index: 1;
}
#wrapper {
position: relative;
top:0px;
left:0;
right:0;
margin: 0 auto 0 auto;
width:100%;
text-align: center;
z-index: 3;
}
#socialLinks {
position: absolute;
margin-top: 14px;
float:right;
right:0px;
}
#top-menu {
position: absolute;
top:0px;
left: 0px;
width:320px;
z-index: 100;
}
section#homeContent {
position: absolute;
top: 400px;
width:320px;
z-index: 10;
}
section#faqContent {
position: absolute;
top:900px;
width:320px;
z-index: 10;
text-align:left;
}
footer {
position: absolute;
font-size: 1.15em;
top: 1230px;
padding: 0 1% 0 1%;
width: 100%;
height: 75px;
text-align: center;
z-index: 10;
}
.footer{
text-align:center;
padding: 2% 0 0 0;
}
#band3{
position: absolute;
top: 1255px;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png')repeat-x;
z-index: -1;
}
you should set the width property
#media only screen and (max-width : 320px) {
html {
margin:0;
padding:0;
background: url('../_images/iphoneCardboard_flat.png')repeat;
width: 320px;
}