Responsive css for all mobile resolutions

Question

I want to make a design for mobile device (portrait and Landscape view). I want to make width 100% when the view is portrait and 50% when the view is landscape.

I know its very easy using media query. But am not able to fix this for all devices. There are so many resolutions, is there any specific css for landscape and portrait view?

        .main_cont {overflow:hidden; position:fixed}
        .box1 {
        background:pink}
         .box2 {
        background:lightblue}



        @media screen and (max-width:640px) {
            .box1, .box2 {
            float:left; width:50%; }
        }

<div class="main_cont">

        <div class="box1">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        </div>

         <div class="box2">
             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

         </div>

    </div>

enter image description here

Its working fine , but i want make it, in all mobile portrait view div should be 100% and landscape view div 50% — anji, Jan 23 '15 at 09:59
possible duplicate of [Which are the most important media queries to use in creating mobile responsive design?](http://stackoverflow.com/questions/12045893/which-are-the-most-important-media-queries-to-use-in-creating-mobile-responsive) — BiscuitBaker, Jan 23 '15 at 10:06

score 0 · Answer 1 · answered Jan 23 '15 at 10:05

0

@media all and (orientation:portrait) {.box1{width:100%} .box2{width:100%}}
@media all and (orientation:landscape) { .box1{width:50%} .box2{width:50%} }

answered Jan 23 '15 at 10:05

anji

344
3
6

2

Please add some explanation to this answer. As it stands now, it stands change of being deleted. – oɔɯǝɹ Jan 23 '15 at 10:47

score 0 · Accepted Answer · answered Jan 23 '15 at 10:08

Try this:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<style>



    .box1{

        background:#FFC0CB;

        width:50%;
        float:left;

        }
    .box2{

        background:#ADD8E6;

        width:50%;
        float:left;

        }


/*Portrait Tablet*/
@media only screen and(min-width: 481px) and (max-width: 768px)and (orientation:Portrait){

        .box1{
        width:100%;


        }

    .box2{
        width:100%;


        }

    }

/*Landscape smart phone*/
@media only screen and (min-width: 321px) and (max-width: 480px)and (orientation:landscape){
        /* Styles */
    .box1{
        width:50%;
        float:left;

        }
    .box2{
        width:50%;
        float:left;

        }
    }

/*Portrait smart phone*/
@media only screen and(max-width: 320px)and (orientation:Portrait){

    .box1{
        width:100%;


        }

    .box2{
        width:100%;


        }

    }
</style>
</head>

<body>


  <div class="box1">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="box2">

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>



</body>
</html>

Responsive css for all mobile resolutions

2 Answers2