CSS fails when changing device orientation


#1

Hey,

I was just about to add some media queries for the iPad to make the website look even better, but somehow some CSS rules drop out as I change the orientation of the device (portrait first, then to landscape) without reloading after. Though, when I reload the website, the CSS works totally fine.

But its just one part of the website. Its the lis in the ul inside the header. They keep their paddings, although padding is set to padding: 0; Safaris web inspector shows cancelled CSS lines by crossing them out, but in this case it doesn't, although the li has the padding indeed. Its like it forgot to update it.

I am testing on an iPad Air running iOS 8.1 and Safari. Check the website here: www.taxi-thomas-schulze.de/new/index.html

Thanks for helping.


#2

Curious - what happens if you set the #navigation to 100% height instead of 160? Also, put add this rule in and then give me a screenshot of what it looks like with those rules added. I'm heading home from work which means I no longer will have access to an iPad.

header * { border:1px solid red!important}
#navigation{height:100%;}

The border is just so I know what's going on with the elements.


#3

Make sure you have initial scale set to 1 in the meta viewport tag as this can sometimes cause that problem.

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

#4

Hey Ryan. Shall I put the code into the query or into the general css?
@PaulOB Thanks, but it didn't help.


#5

Doesn't matter. The query is fine. You can make a test page for this BTW.


#6

You might also want to add this:

/* Prevents Mobile Safari from bumping up font sizes in landscape */
@media only screen and (max-device-width: 480px) {
	body {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
}

I would also remove the height from header and #navigation and let the content dictate the height. It may be that things get zoomed in landscape and those dimensions may not match the content any more.

I would also remove this block of code and start again.

/*iPad landscape*/

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	#navigation {
		height: 100px;
	}
	#navigation li {
		line-height: 100px;
		height: 100px;
		padding: 0;
	}
	#navigation li img {
		height: 60px;
		padding-left: 5px;
	}
	.nav {
		line-height: 160px;
	}
	header {
		height: 100px;
	}
}

You don't want to be testing 'max-device-width' (or min-device-width) as that is the width of the device and not really the width that you should be concerned with. You really only need to concentrate on screen-width (max-width and min-width) and you will automatically collect landscape mode on the way

@media screen and (max-width:???px){}

Don't code for devices but code for your design and only apply media queries when the design needs it and not when you think it will fit some strange device width. Open and close your browers window and when the design looks awkward or breaks then throw in a media query and make it look better. The breakpoints for your media queries will be related to your design and not to any devices. In that way you collect all devices automatically in landscape or portrait mode and avoid the resizing issues associated with device width.


#7

I just created a local copy of your site and just removing that block of code I mentioned above fixes the ipad for me in both portrait and landscape mode without needing to refresh.


#8

The website worked perfectly without the media queries, you are right. But in my opinion the header is much to high and bold to fit the landscape view on the iPad. Thats why I wanted to adjust it to the new dimensions of the screen.

Honestly said I think I didn't get the first of your two posts; you don't want me to concentrate on the device width, but on the design instead. For me the design is depending a lot on how the device widths (or screen widths) are. You can't have a 900px high header on 800px high screen. Whats wrong with adjusting the design to the device width? I styled the header so that tablets will run the desktop-navigation, smartphones instead have their own styling, adjusted to what a customer would want to have when he visits a taxi website on the go.

I never realized that there is something called a screen-width.


#9

No. Paul meant htat your media queries were based around the max-device-width when you should ONLY care about resolution.


#10

Okay. Although changing it didn't make a difference to the output.

Is this snippet really referring to screen sizes smaller than 480px or was it just a mistake because it would be only for the smartphone mobile view then.

/* Prevents Mobile Safari from bumping up font sizes in landscape */
@media only screen and (max-device-width: 480px) {
	body {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
}

#11

Device widths are random. They all conform to screen size though. All mobile devices around around 480px or less. It's easier to make a mobile view for them.


#12

Pasted it into the code. It still fails when turning to landscape :/


#13

Ok, following your example then what would you do for the other couple of hundred devices around. That list has probably doubled by now anyway. Just a brief look will tell you it is impossible to cater for specific devices like that so just don't do it as you would need hundreds of media queries.

You rarely want to cater for height anyway (unless it is removing a fixed element if it is outside the viewport) as your design should adapt to the current view automatically. The only way to do this is to rely on a design centric approach and open and clsoe your browser's window and throw in a media query when the design calls for it. In that way you cater for all devices.

There is no real difference to a desktop site at 1024px and an ipad in landscape mode at 1024px. They should both get the same design. Your 'device width' media query is just breaking the layout because it is badly coded and does not re-align the content properly. If you had used max-width or min-width media queries with your same code then you would also get the same broken layout in the desktop. (The initial scale setting I gave you earlier fixes the orientation change but as you are checking device width it is unclear whether that changes when you rotate the device - it is still the same device and probably needs a refresh to make it change; unlike min and max-width which will change automatically when the device is rotated.)

Remove those 'device width' media queries and the page will work properly. If it looks wrong on the ipad in landscape at 1024px then it must also be wrong on the desktop. There would be no need to change it otherwise. I have never had to adjust a site differently for the ipad in landscape mode as opposed to a desktop at the same width (unless you have done silly things like expecting content + padding to equal a specific width).

It really is simple as the first step to advanced responsive web design is to throw away all your advanced responsive web design techniques and start again. Only add techniques when the design calls for it (not when you think there may be a device at that size).

Chasing devices is old hat and just won't work.

From the authorative PPK quirksmode's site :
:
"Besides, we’re not interested in the device width. We’re interested in the width of the layout viewport that the device vendor considers optimal"

More info:

http://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints?


#14

That's because of your device width media queries as mentioned above.


#15

Forget devices altogether. When I close my browser window I want the content to fit without a scrollbar. If I make this happen it happens for all devices.:)


#16

Thanks. Would it be the right way to set all the lengths and sizes in percentages, so that it automatically adjusts to the width and height of the viewport? Shall I calculate what the header is high in relation to the screen height when viewed on desktop and then take this percentage into the mobile view as well?

The design isn't bad as if I had to rework the whole CSS every 20 pixels the viewport becomes wider/higher. Its just that the height-width relations on the landscape mode make the layout look too bold.


#17

To be honest I rarely set specific widths at all. I will use a container with a max-width set at something like 1200px (approx) as very wide sites are generally hard to read unless you re-arrange the content into smaller columns. Then the content can sit inside that using percentages for the side column and no size on the main column so that it just fills the area as required. I would usually set a min-width on a side column so that it fits nicely into a 320px viewport and doesn't get squashed too small. No media queries are required so far for this to work across the whole range. At smaller widths you may want to make the two columns into one column and that would mean simply removing the float at a point in the design that looks good.

If you want full viewport width images then you can start with a 100% wide element and then just just nest the content portion of the html inside a max-width container.

When you have a navigation across the top of the screen (like yours) then avoid using content + padding + widths to make it fit. You can use the display:table-cell properties to make the nav fit the whole width without the need for padding or widths at all. This means the nav will grow and shrink across a very wide range. You will only need to add a media query when the content no longer fits and not every few pixels.

Designing like this makes things so much easier as you are not forcing things into fixed boxes but letting it flow as required. Some simple layouts can scale right down to 320px without the need for a single media query.

Of course you can tweak things as you go as on a wide screen you may want more columns and on a small screen only one column. You may have very large fonts in the wide screen which would be out of place on a small screen so feel free to tweak but remember that fonts look smaller on a mobile so 13px fonts on a mobile are hard to read so don't just keep decreasing font-size to make something fit.

Responsive web design is what you get when you don't do anything.:) Create a page and fill it with text, Add no styles at all. That page is now totally responsive (assuming the viewport meta tag is present). It will of course look pretty bland so now it is your job to maintain that responsiveness while making the page look more attractive. All web pages are responsive until the developer gets hold of them smile

The viewport is always 100% wide and 100% high so for width you just need to ensure that your content will fit in that width no mater what the size. For images this may mean setting width:100% and height:auto. Usually though we are talking about background images and you can just use background-size:cover.

100% height is a different matter and for mobiles this really isn't something to consider but just to ensure that the image is not massive. If it needs to be an initial 100% high image then use a display:table container set to 100% high and use a background image set to cover. You can then if you want select a smaller image for mobile if it requires it but generally it is best to avoid making the mobile download two images (responsive images is another question and there have a been a few other threads recently talking about this so do a search for responsive images).

If I understand correctly then you are saying that on an ipad in landscape mode then the height of the window is not that tall and so the header may seem big in comparison. If so then the analogy remains the same as on the desktop because I never have my browser maximised. At the moment the message I am typing this into has a browser height of 500px so you should be taking the same care of me as you are for your ipad in landscape.

This can be done by throwing in a media query based on the height (min-height or max-height) of the viewport and if the viewport height is small then you can make things smaller as required. Generally though you would avoid having to do this as you could end up making too much work for yourself but it is easily possible. Again there is no need to cater for specific devices but you can use the height of the ipad as a guide for your change.

I often use height media queries when I have a fixed sidebar that is perhaps xxem (or xxpx) tall and then I will set that sidebar to be not position :fixed when the viewport is smaller (because otherwise fixed positioned content that is outside the viewport is unreachable).

So to summarise you can use a max-height media query to make your header smaller for devices that have smaller heights (just choose a suitable height breakpoint when you think the design looks odd or not right). You can do this in the browser and tweak as required. Remember though that when you over-ride styles in the media query make sure you the rules are sound. Changing line-height on a child will not affect the line-height of the parent and changing the height may mean things don't fit (which comes back to my original point of not setting things in stone and letting content flow as that makes it easier to adjust later on.)

None of the above is set in stone so you can tweak and adjust as required but the less control you have imposed over your design then the easier it is to change via media queries. The secret is to make it look like you want without resorting to fixed techniques everywhere.


#18

For your header you should just use padding top and bottom for the height and then in the media query reduce the padding. I have tested this on an ipad with your code and it reacts exactly to the orientation change without the need for a refresh.

#navigation{
	display:table;
	width:100%;
	margin: 0 auto;
	max-width: 1070px;
	min-width: 690px;
	padding: 0;
	text-align: center;
}

#navigation li {
	display: table-cell;
	margin: 0;
	color: #919191;
	font-family: DayRoman;
	font-size: 21px;
	text-align: center;
	padding:40px 0;
}
#navigation li img {
	vertical-align: middle;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
    width: 260px;
}
.nav {
	max-width: 180px;
	min-width: 110px;
}
.nav a {
	text-decoration: none;
	display: inline-block;
	position: relative;
    color: inherit;
}
.nav a:after {
	content: '';
	position: absolute;
	top:40px;
	left: 0;
	width: 100%;
	height: 1px;
	visibility: hidden;
	-moz-transform: scaleX(0);
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	background-color: #515151;
	transition: all .3s ease;
}
.nav a:hover{
    color: #515151;
}
.nav a:hover:after {
	-moz-transform: scaleX(1.2);
	-webkit-transform: scaleX(1.2);
	-ms-transform: scaleX(1.2);
	transform: scaleX(1.2);
	visibility: visible;
}
#navigation li.logo img{
	width:98%;
}
#navigation li.logo a{
	display:block;
	width:100%;
	max-width:260px;
	text-align:center;
	margin:auto;
}
#desktop {
	padding-top: 160px;
	display: block;
}

This is all the code you need for the header change at small heights:

/*iPad landscape*/
@media only screen and (max-height:768px){
	#navigation li {padding:20px 0;	}
	#navigation li img {
		height: 60px;
		padding-left: 5px;
	}
}

No heights needed and no large line heights so changing is simple.;)


#19

Hey,

thanks for the solution and the advices provided. I was busy with school for months and came back to the problem today, and your code changing indeed works. Although I had to remove the header{height:160} in line 24.

Thank you for your time!


#20

Okay. I updated the mobile css of all the subpages and published the website because all of the functionalities work now. But there are still some details wrong.

When in landscape, the index.html has a different font-size in comparison to all the other pages. The inspector says that the size is the same but it obviously isn't. The CSS should be the same on all subpages. The problem occurs on the iPad landscape only.

This is the new URL: http://www.taxi-thomas-schulze.de/index.html

Thanks.