Hi all,

I'm using media queries to sort out my site on an iPad (landscape orientation), it looks OK to me in portrait orientation.

I'm using the following code to make changes from what I already have for a max-width of 900px:

@media(max-width: 900px), only screen and (min-device-width: 1000px) and (max-device-width: 1024px) { }

The only way I can override CSS from the 900px media query is to add !important to every rule, this seems like a bad move.

Basically, my site looks different on mobile as to desktop.

Hope this makes sense, not so sure it does but I'm not very good with words...

Have you tried using css orientation?

@media (orientation: landscape) {
  .whatever {
    /*styles here*/
  }
}

 

15 minutes ago, Fuzzy Logic said:

Have you tried using css orientation?

@media (orientation: landscape) {
  .whatever {
    /*styles here*/
  }
}

 

Thanks, but using that means affects desktop screens to when I want it to only affect iPads in lansdcape orientation..

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 1000px) and (max-device-width: 1024px) {
	.topbanner { 
		top: 158px !important;
		width: 100% !important;  height: 100px !important;
	}
	#searchicon-m {
		width: 77px !important;  top: 160px !important;  right: 20px !important;   
	}
	.searchpop {
		top: 258px !important;  height: 70px !important;
	}
	input#s {
		width: 97% !important;  height: 50px !important;
	}
	.page-id-754 .banner-slides {
		top: 208px !important;
	}
} /* iPad [portrait + landscape] */



@media(max-width: 900px), only screen and (min-device-width: 1000px) and (max-device-width: 1024px) {
	body {
		margin: 0;
	}
	a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; }
	img {
		width: -webkit-fill-available;  width: -moz-available;  width: 100%;  height: auto;
	}
	#main-div {
		width: 100%;
		overflow: hidden;
	}
}

 

No, because you could do something like this for example..

@media screen 
  and (max-device-width: 320px) 
  and (max-device-height: 640px) 
  and (orientation: landscape) {

}

 

5 minutes ago, Fuzzy Logic said:

No, because you could do something like this for example..

@media screen 
  and (max-device-width: 320px) 
  and (max-device-height: 640px) 
  and (orientation: landscape) {

}

 

Sorry if I'm not following correctly, with the following code it now appears on a desktop browser of 1024px width or less - and I still need to use !important:

@media screen 
  and (max-device-width: 1024px) 
  and (max-device-height: 768px) 
  and (orientation: landscape) {
	.topbanner { 
		top: 158px;
		width: 100%;  height: 100px;
	}
	#searchicon-m {
		width: 77px;  top: 160px;  right: 20px;   
	}
	.searchpop {
		top: 258px;  height: 70px;
	}
	input#s {
		width: 97%;  height: 50px;
	}
	.page-id-754 .banner-slides {
		top: 208px;
	}
} /* iPad [portrait + landscape] */



@media(max-width: 900px), screen and (max-device-width: 1024px) and (max-device-height: 768px) and (orientation: landscape) {
	body {
		margin: 0;
	}
	a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; }
	img {
		width: -webkit-fill-available;  width: -moz-available;  width: 100%;  height: auto;
	}
	#main-div {
		width: 100%;
		overflow: hidden;
	}
}

 

Sorry trying to understand what you're trying to do, in the op code (min-device-width: 1000px) and (max-device-width: 1024px) = targeting a 24px difference pocket? Second thing I don't quite understand is where these dimensions are from, looking at a iOS Design Cheet Sheet iPad could be a lot of different things.

Can you screen shot the portrait and landscape and highlight what's actually wrong?

I should've used the following instead of what I originally used I think:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

My main issue was that I wanted to override certain CSS rules, but the only way I saw how was to use !important in each rule.

I ended up getting my site to look how I wanted it to look simply by removing the following code. A silly oversight by me.

@media only screen and (max-width: 1024px) and (min-width: 800px)  {
	html {
		zoom: 0.8; // Old IE only //
		-moz-transform: scale(0.8);
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		margin: -126px -70px 0;
	}
}

Sorry for being so confusing in my intentions, all's well that ends well though - thank you!

So for media queries the actual numbers defined don't need to follow any standards and certainly don't map them to current device sizes as your UI should work for ALL conceivable screen sizes, current and future.
Your breakpoints should be set at some fairly arbitrary numbers but with fairly consistent points between them say: 400px, 800px, 1200px for example.  The PX numbers should be converted to REM to ensure they work for users who change their base font-size.  You can calculate REM values by dividing the pixel value by 16, of course you might also want to set a media query at the point that the content breaks down.
You also don't need the verbose syntax you have defined above.
`@media (min-width: 400px) {}` is suffice.
I've never bothered with orientation, device-with etc etc media queries, if you UI works for all sizes then this won't matter, all that will matter is the screen width and very occasionally the height.  I've built probably over 100 UIs and this has always worked.  Keep it simple!

If you are using !important as you describe then you have a selector specificity issue or a CSS ordering issue (Or both).  I suggest you take some time to read up on selector specificity to avoid unnecessary use of !important, which should only really be used for utility overrides.

Don't bother writing vendor prefixes in your code, it adds bloat to your source and makes it harder to read and override the styles etc.  Tools like Autoprefixer will automatically put in necessary prefixes at build time using a browserslist that you pass it.   Every time you build it will map the browserlist against the canIUse database so you can be sure every prefix generated is necessary at that moment in time.

Looking at some of your CSS declarations you are making a number of smells like magic numbers, qualifying selectors, ids etc.  I encourage you to take a read of https://csswizardry.com/2012/11/code-smells-in-css/ to avoid making them in the future.

Hope this information is useful.

Edited February 25, 20197 yr by rbrtsmith

Thanks for the reply rbrtsmith, very helpful and informative.

I do use arbitrary numbers as opposed to device-specific devices, but was tempted to go the other way. No need to now.

I use @media(max-width: 900px) for a mobile-responsive setup, it looks quite a bit different to how it looks on desktop (I'm forever working on it as it's more of a side-project than for a demanding client). Because of this when it comes to iPads portrait orientation is altogether different in looks to landscape orientation. Bad practice?

Unfortunately I use !important more than a few times and a number of smells like display: none; and padding: 0; but I'll look into it.

Thanks again!

4 hours ago, Demonolith said:

Thanks for the reply rbrtsmith, very helpful and informative.

I do use arbitrary numbers as opposed to device-specific devices, but was tempted to go the other way. No need to now.

I use @media(max-width: 900px) for a mobile-responsive setup, it looks quite a bit different to how it looks on desktop (I'm forever working on it as it's more of a side-project than for a demanding client). Because of this when it comes to iPads portrait orientation is altogether different in looks to landscape orientation. Bad practice?

Unfortunately I use !important more than a few times and a number of smells like display: none; and padding: 0; but I'll look into it.

Thanks again!

I should clarify on the undoing styles thing…
It's not saying don't use properties like `display: none;` and `padding: 0`.  But when you do you should question: Are you undoing a style that you had set prematurely.  Sometimes you need to reset browser default styles like the padding on a list.  Basically these guidelines aren't black and white, but you should question yourself when you break one of them - there might be a good reason, but more often than not your code could do with a bit of a refactor.