WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Responsive layout & media query issue

Reply
  Thread Tools Display Modes
Old 11th July 12, 07:06 PM   #1
Doug_H
WLC Member
 
Join Date: Jul 2012
Posts: 1
Default Responsive layout & media query issue

Hi,
I'm experimenting with media queries targeting the viewport, and have a peculiar problem.

I have a very basic layout using a wrapper, header, nav, main content, aside & footer using percentages for layout. Wrapper is set at 80% and all elements are contained in the wrapper. Header, nav & footer within the wrapper is set at 100%. Main content (75%) is floated left, aside (25%) to the right.

Everything looks fine when resizing the browser to different sizes, but when I target a specific viewport, and then remove the floats (so that the aside drops down vertically below the main content), the content in the aside jogs to the right about 45px after it drops below the main content. I'm puzzled!

I'm using a reset which sets the following for most elements:
margin: 0;
padding: 0;
border: 0;
font-size: 100%;

For html5:
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}

Here are the two elements and the changes between "normal" and the query.
Before media query:
.main{width:75%;height:auto;position:relative;floa t:left;clear:right;}
aside{width:25%; height:auto; position:relative;float:right;}

After query:
@media only screen and (min-width: 320px) and (max-width: 640px) {
.main{width:95%;height:auto;position:relative;}
aside{width:95%;height:auto;position:relative;}
}

Wrapper is not changed for the media query, and is set for width:80%; overflow:auto; margin:0 auto;.

I can solve the problem by floating both to the left, like so:
.main{width:95%;height:auto;float:left;}
aside{width:95%;height:auto;float:left;}

But I'm trying to figure out why this is neccessary. Why is the main content positioned correctly, but the aside moves to the right? They should be positioned the same with the same parameters, shouldn't they?

Hopefully someone here has an explanation, 'cause I'm stumped! Thank you.
Doug
Doug_H is offline   Reply With Quote
Old 14th July 12, 03:07 PM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,167
Default Re: Responsive layout & media query issue

Do you have a live link?

Also, can you toss a button in there to simulate the code as being on a specific view port?
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:58 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright© 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.