• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 277
  • Last Modified:

CSS MEdia Queries - Targeting orientation

Hi Experts!

I am building a promotional web site that should run on smartphones, tablets and have fallback on desktop.  I am treating all devices the same, and have only 2 layouts - one for portrait mode and one for landscape.  This applies to all devices - even desktop - if the width is less than the height, I want to show the portrait layout.

Can anyone help with this please?  I have little experience using media queries..  Attached is an example of what I am using so far.  My android device (smartphone) correctly switches layout when orientation changes, and the landscape layout is shown for everything else.

Thanks in advance..

TheFoot


/* Desktop & Landscape */
.ui-page section.content header{
	width: 50%;
	float: left;
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	.ui-page section.content header{
		width: 100%;
		float: none;
	}
}

Open in new window

0
Barry Jones
Asked:
Barry Jones
1 Solution
 
Barry JonesAuthor Commented:
Great link.. all sorted thanks!
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now