CODEWITHSUNDEEP
cssmedia-queries
Richard Harris
Richard Harris

Reputation: 413

Page width issue when using media queries

I am having an issue with the page width in my responsive design when using @media.

I have set my design to adjust as follows:

@media only screen and (max-width : 400px), screen and (min-width: 400px) and (max-width: 800px) and (orientation: portrait){

}

This was working fine until I made a few updates to the width settings. Previously, i had a min-width setting of 400 px on an element as I didn't want the page to reduce below 400px. It would then adjust and expand as I wanted between 400-800px.

However, I have changed it so that the elements are set to 100% width for below 400px as well as 400-800px, so that the screen will auto fit any mobile.

However, for some reason I am now getting the following issue.

When the screen goes below a width of 800px, the page width auto sets to 859px in width, and stays that with until it gets below 400px, at which point the page width auto sets to 425px.

In both cases it is fixed at that with and doesnt adjust to the screen width.

I can't find anywhere else that has this problem, and I don't really understand why. It seems to me that when the page adjusts, it is taking the '400px' and '800px' point and setting all elements with 100% width to these values. The extra 25px and 59px may be margins or something.

I also have one image that is set to 30% of the width of the page, and this is also taking it's size from 425px and 859px respectively.

If anyone has any ideas on what might be causing this I'd be very grateful.

Upvotes: 0

Views: 515

Answers (2)

Richard Harris
Richard Harris

Reputation: 413

Thanks for your replies.

Turned out to be a combination of things.

Firstly, I had a 'max-width: 80%" set for my normal design, and although I set the media query widths to 100% I needed to specify 'max-width:100%' also.

The other issue was that in the browsers, there is a default min width and min height setting for your body. These were turned on and set to 420px.

Once both these changes were made the issue was solved.

I'm guessing the max width and height for the body is so that websites display properly on laptops when browser sizes are reduced.

If you want to change the min-width and height, go to 'inspect' (in chrome, simmilar options in other browsers, then elements tab. Find your 'body' element and it will have displayed a min-width and min-height value if they are turned on. To turn them off, simply select the body element, ten in the 'elements' tab to the right, hover over the min-height and min-width and there is a tick box to turn on and off.

Have checked in other browsers and the methods are similar.

Thanks again for your suggestions

Rich

Upvotes: 0

Christopher Platt
Christopher Platt

Reputation: 21

this is the proper format for a media query and i've given some common sizes for different platforms you might use. 

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

If you want to get a little deeper remember that the and requires all conditions to be true in order for the css within to be used. I would recommend that you look at the or statement instead, or use a combination of both and and or to fulfill the conditions that will best suit your needs.

Hope that helps.

Upvotes: 2

Related Questions