CSS MEdia Queries - Targeting orientation

Posted on 2011-10-11
Last Modified: 2012-05-12
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..


/* 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

Question by:Barry Jones
    LVL 8

    Accepted Solution

    LVL 12

    Author Closing Comment

    by:Barry Jones
    Great link.. all sorted thanks!

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    Join & Write a Comment

    A short article about a problem I had getting the GPS LocationListener working.
    Let Bitmoji into your life. Now is the time to learn a new language of smartphone messaging with this brief introduction.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now