CSS - split screen on pc but stacked on mobile

I'm trying to split my page to 4 equal parts, and the top left I want to divide horizontally to 2 parts. My main concern is how it will be on mobile, I don't want it to be split like on pc, I want it to be stacked (block on top on another). as explained in pic. I thought about bootstrap grid but I couldn't make it. What I have so far is something along the lines of:

<style>
html, body { height:100%; margin:0; padding:0 }
div { position:fixed; width:50%; height:50% }
#NW { top:0;   left:0;   background:orange  }
#NE { top:0;   left:50%; background:blue    }
#SW { top:50%; left:0;   background:green   }
#SE { top:50%; left:50%; background:red     }    ​
</style>
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>​
<div id="SW"></div>

I want the divs to occupy 100% of screen height and width. (with bootstrap I had problems doing this)

Answers


Note: I'm not familiar with Bootstrap, so this may not be as simple as the examples that use it. This is a plain CSS example.


You can do this with CSS media queries.

Notes:

  • I changed the ids to classes for better maintainability. (it seems you only have short ones and tall ones of the same width). If you are styling each one individually (like you are doing with colors), then leave the ids.

  • I put the two shorter ones in a container <div> so that they would stay together, even with a float.

  • As @shirfy mentioned below, always put the desktop style in the media query to improve mobile loading speeds. This is known as mobile-first web design.

Here's a JSFiddle.

And here's a code snippet (try resizing the page: under 480px width it will be considered "mobile" and resize, and vice versa):

div {
    width: 100%;
    float: left;
    display: inline-block;
    box-sizing: border-box;
}
div.container > div {
    width: 100%;
}
div.short {
    height: 100px; 
}
div.tall {
    height: 200px;
}
/* media query CSS */
@media screen and (min-width: 480px) {
    /* Notice how this is the desktop style */
    div {
        width: 50%;
    }
}
/* These styles are for coloring - ignore them */
div.container > div:nth-of-type(1) { background-color: #ffdddd; }
div.container > div:nth-of-type(2) { background-color: #ffddff; }
body > div:nth-of-type(2) { background-color: #ffffdd; }
body > div:nth-of-type(3) { background-color: #ddffdd; }
body > div:nth-of-type(4) { background-color: #ddddff; }
<!-- Note this container class -->
<div class="container">
  <div class="short">div1</div>
  <div class="short">div2</div>
</div>
<div class="tall">div3</div>
<div class="tall">div4</div>
<div class="tall">div5</div>

Use bootstrap grids for this: Include bootstrap.css in you page and include this meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> and the grid code will be as <div class="col-sm-12"> <div class="col-sm-12"> <div class="col-sm-6"> <div class="col-sm-12"> </div> <div class="col-sm-12"> </div> </div> <div class="col-sm-6"> </div> </div> <div class="col-sm-12"> <div class="col-sm-6"> </div> <div class="col-sm-6"> </div> </div> </div>


Need Your Help

Canvas getting wrong coordinates for finger drawing after pinch to zoom

android android-canvas pinchzoom scaletransform

I create canvas finger drawing app like line brush which is on https://play.google.com/store/apps/details?id=jp.naver.linebrush.android, I done pinch to zoom functionality but problem is after zoom...

Session vs Cookie vs Custom IPrincipal

asp.net-mvc session cookies

I'm working on a project where certain logged in users have a dedicated page which they can choose the url of. When a user logins in i would like to display a link "View my page". I was just wonder...