@media not working iphone

I have been having issues with iphone css and cant seem to solve them

[softouch]

Hi,

I have been having width % issues for a week only on my iphone mobile device that I use for testing. There are left and right containers that should imo float and be the full width of main "div#newpage" container. However the right hand containers are to large for a small portait screen and do not float, they are stacked one above the other. The only way I could fix this issue is to make the width % MUCH smaller. It works fine then.

So I put these fgixes in a @media query and I think it shoudl work but ... it doesnt.

I have incuded the relevant css here.

body{color:#000000;font-family:arial,helvetica,sans-serif;font-size:0.8em;background-color:#cc9999;margin:2px;padding:0;}
div#newpage{border:1px solid #000;position:relative;width:100%;max-width:1024px;margin:0 auto;padding:0;background-color:#ffffcc;}

Why is the below css not working on my iphone?

/* phone screens 320px to 360px wide when in portrait */
@media screen
and (min-width: 320px)
and (max-width: 380px)
and (orientation: portrait) {
/* header */
div#topnavigation{float:right;width:50%;min-width:250px;padding:8px;margin:0;text-align:right;}
div#breadcrumb{float:right;width:50%;min-width:250px;padding:8px;margin:0;text-align:right;}
/*main cointainers */
div.middlenoadverts1column{float:left;width:60%;min-width:250px;border:1px solid #999;background-color:#fff;margin:0;padding:8px;text-align:left;vertical-align:top;-moz-border-radius:10px 10px 10px 10px;-webkit-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;}
}

/* all screens 381px wide or more */
@media screen
and (min-width: 381px) {
/* header */
div#topnavigation{float:right;width:79%;min-width:250px;padding:8px;margin:0;text-align:right;}
div#breadcrumb{float:right;width:79%;min-width:250px;padding:8px;margin:0;text-align:right;}
/*main cointainers */
div.middlenoadverts1column{float:left;width:79%;min-width:250px;border:1px solid #999;background-color:#fff;margin:0;padding:8px;text-align:left;vertical-align:top;-moz-border-radius:10px 10px 10px 10px;-webkit-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;}
}

Thank you for your help in anticipation of your solutions.

softouch

[softouch]

probably because i am a new user i cant seem to edit my post.

div.navigationcolumn{float:left;width:20%;min-width:87px;border:1px solid #999;-moz-border-radius:10px 10px 10px 10px;-webkit-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;background-color:#ffffff;margin:0;padding:0;text-align:center;vertical-align:top;}

is the left container

[softouch]

oh yes ... further addtion from my html

<meta name="viewport" content="width=device-width, initial-scale=1">

[not2easy]

Hi softouch and welcome to WebmasterWorld [webmasterworld.com] That Welcome link can help explain about edits - we allow edits for a limited time after posting.

About the width issue, - a few questions so we know where to look:

I see that there are floats applied to various containers, but I don't see the floats being cleared. Does the css also include settings to clear floats?

Have you used the validator tools that can show you errors within the html/css of your page?

I understand that this may not be the entire .css file content shared here (which is appreciated) - so this may be managed in another font-size setting, but 'em' is a relative size that is based on other settings. Device default for font size is 16px so without other settings for font size, your 0.8em = 12.8 px.

The links to w3's validation tools are here in the CSS Charter [webmasterworld.com]

Explanation about sizes and units [w3.org] from w3.org are helpful.

[softouch]

Hi not2easy,

Thank you for your swift reply.

"I see that there are floats applied to various containers, but I don't see the floats being cleared. Does the css also include settings to clear floats? "

<div style="clear:both;"></div> after all sections.

"Have you used the validator tools that can show you errors within the html/css of your page? "

Both html and css come upo with a few warnings no errors.

" Device default for font size is 16px so without other settings for font size, your 0.8em = 12.8 px. "

After your post I tried 12.8px 16px 1em and 0.8em ... no change to issues im afraid.

Still at a loss im afraid. Now i know the @media is being rendered correctly as I changed to background-color:#999; in

@media screen
and (min-width: 320px)
and (max-width: 380px)
and (orientation: portrait)

and it did change the color. So it does appear to be a sizing issue with the % not working correctly on iphone 6's?

All the best,

softouch

p.s. I found the edit button :)

[not2easy]

p.s. I found the edit button :)

That "Preview" button below lets you use quotes and other styling.

_{It is all in the Welcome linked info.}

[NickMNS]

@media screen
and (min-width: 320px)
and (max-width: 380px)
and (orientation: portrait)

Side note, this wont solve your issue but is worth mentioning.

You should not use both min-width and max-width, only one of the two. Moreover, in this case min-width is redundant as there are no screen sizes smaller than 320px. (They may exist but you typically wouldn't design for them) If you choose to use min-width then your base CSS, without the media query would apply to all screen less than 380. Then the CSS in your media query (min-width: 380px) would modify any styles that needs to appear differently on large screens, then you can add an additional break point at 920 by using (min-width: 920px). So styles in 380 would apply to all screens between 380 and 919, and then 920 would apply to anything larger.

[not2easy]

There are other width conflicts, for example, the settings for this element

/*main cointainers */
div.middlenoadverts1column

listed with media query for

@media screen
and (min-width: 320px)

the min-width of 250px is well over the results for:

width: 60%;
min-width: 250px;

(which is 192px @320px width) and only 170px is usable with 8px padding and a 1px border, with 2px margin (body element) if a person were not in landscape mode. It is best to consider worst case possibilities.

For

@media screen
and (min-width: 381px)

the width on a 1024 screen, for example, would be

width: 79%;
min-width: 250px;

which results in 809px wide (786 after padding, margins, etc.)
There should be a percentage OR a px width, but not both because they can be conflicting. The math needs to work for all screens that might view the content or it is difficult to visualize the overall appearance of the layout, for content layout planning.