How to Make 2 or More Horizontal Divs Stack into a Vertical Div When The User Shrinks The Browser Window

How to convert 3 horizontal items vertically when screen shrinks?

You can use this css code and change the "max-width" property with your own decision:

@media screen and (max-width: 900px) {
  .example-item {
    display: block;
  }
}

jsfiddle:
https://jsfiddle.net/mr_seven/1ktcqay4/2/

you can change result area width to see what will be happened if screen width changes.

Make divs in a row stack on top when screen size is smaller

Add a media query that creates a break point at which the width of the elements is bumped up to 100%, like this:

#video-section {
  max-width: 1000px;
  margin: 0 auto;
  vertical-align: center;
}
.video {
  width: 50%;
  height: auto;
  float: left;
}
.bullets {
  width: 50%;
  text-align: left;
  float: left;
}

@media screen and (max-width: 500px) {
  .bullets, .video {width: 100%;}
}

Note that I have made some small improvements on your CSS too.

Div that takes remaining horizontal space and stacked vertically on small screen

As said in this stackoverflow post, Flexbox can help you if you don't want to resort to jQuery because you only need to support a single modern browser: Mobile Safari (Edit I also found the height of the left box in IE doesn't work right in my Fiddle, I have NO idea why; it should).

For you that would be: This awesome fiddle!

Edit Since you want the right div to adjust to it's content, you want this example instead

CSS:

.frame {
    position:relative;
    background-color: lightgreen;
    width: 80%;
    padding: 12px;
    overflow:hidden;
    flex-flow:row wrap;

    -webkit-justify-content: flex;
    -moz-justify-content: -moz-flex;
    justify-content: flex;

    display: -webkit-box; /* Safari */ 
    display: -moz-box; /* Firefox 21- */
    display: -ms-flexbox; /* IE 10+ */
    display: -webkit-flex; /* Chrome */
    display: flex; /* Standard (Firefox 22+) */

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.left {    
    -ms-flex-order: 1;     
    -webkit-order: 1;
    order:1;

    -webkit-box-flex: 2;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 2;         /* OLD - Firefox 19- */
    -webkit-flex: 2;          /* Chrome */
    -ms-flex: 2;              /* IE 10 */
    flex: 2;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

    background-color: #709670;
    border: 1px solid black;
    width: auto;
}

.right {    
    -ms-flex-order: 2;
    -webkit-order: 2;
    order:2;

    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

    background-color: #127212;
    color: white;
    border: 1px solid black;
    width: auto;

    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
    -ms-flex-order: 2;              /* TWEENER - IE 10 */
    -webkit-order: 2;               /* NEW - Chrome */
    order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

@media screen and (max-width: 700px) {
    .frame {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}

I'm extremely happy with my result, I feel you will be to! I believe it has nearly full (Mobile Safari doesn't support it) support!

CSS divs stack vertically when scaling page smaller

Use a media query to target your device, and put the side column above your content column in the markup. float: right; the side column, and float: left; the content column to appear normally on desktop. Use a media-query to have them clear: both; and remove the float.

CSS (Updated with 100% wrapper)

.wrapper {
  overflow: hidden;
  min-width: 300px;
  width: 100%;
}

article {
  background: #efefef;
  float: left;
  width: 80%;
}

aside {
  background: #ccc;
  float: right;
  width: 20%;
}

@media only screen and (max-width : 320px) {
  aside, article {
    clear: both;
    float: none;
    width: 100%;
  }
}

HTML

<div class='wrapper'>
  <aside>Sidebar with form</aside>
  <article>Content content content ...</article>
</div>

Codepen sketch.

Vertically resizing only 1 of 3 divs to fit window?

This can be achieved with flexbox. Here is the sample code:

#container {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical!important;  -webkit-box-direction: normal!important;  -ms-flex-direction: column!important;  flex-direction: column!important;  height: 240px;  margin: auto;  max-height: 1000px;  max-width: 1200px;}
#vertically-static-top,#vertically-static-bottom {  background-color: #80bdff;  border-radius: .25rem;  color: #fff;  padding: 1rem;}
#vertically-resizeable-middle {  background-color: #957bbe;  border-radius: .25rem;  color: #fff;  flex-grow: 1;  padding: 1rem;}

<div id="container"> maximum 1200 width and 1000 height    <div id="vertically-static-top">20 pixes high</div>    <div id="vertically-resizeable-middle">adjustable height</div>    <div id="vertically-static-bottom">50 pixels high</div></div>

shrink middle div horizontally on browser resize

I think setting max-width of spacer will solve your problem in case content increases.

Set max-width to calc(100vw - 200px) if all margin and padding are 0. Otherwise adjust the value 200px taking margin, padding into account.


I have created a plunker. Please check if it solves your issue. Try checking after running plunker in spearate window

http://plnkr.co/edit/WG9v0MyiD2hiaZrOA3Yw?p=preview

make a div grow and shrink based on the browser window size

<div id="my-div">
  ...content goes here
</div>

CSS

#my-div{
  //For center align
  margin: 0 auto;
  // For grow & shrink as per screen size change values as per your requirements
  width: 80%;
  height: 50%;
}

---

Related Topics