CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Information Technology
Information Technology

Reputation: 2333

Responsive html div elements?

I have 3 HTML div elements that I'd like to see sit side-by-side on a wide screen but, as the screen width collapses, I'd like to see them become vertical.

For example...

Wide screen:

-----------
abc def ghi
-----------

Narrow screen:

abc
def
ghi

Currently, having three HTML divs that look as follows (in another div block) only lays them out vertically...

<div id="Master_Div">
  <div id="Div_1">
    <p>abc</p>
  </div>
  <div id="Div_2">
    <p>def</p>
  </div>
  <div id="Div_3">
    <p>ghi</p>
  </div>
</div>

Maybe, the answer is tied to media queries and/or responsive design but I'm not sure.

Thanks for any help you can offer.

Upvotes: 2

Views: 1511

Answers (4)

Theresa Smillie
Theresa Smillie

Reputation: 38

I would do something like this unless you actually need to apply an ID, classes are easier for multiple divs with one assignment in css, plus they take up less space.

html---
<div class="wrapper">
   <div class="third">Something here</div>
   <div class="third">Something here</div>
   <div class="third">Something here</div>
</div>

css---
.third {
    width: 33.333333%
    float:left;
}
@media screen and (max-width: 767px) {
.third {
    width: 100%;
    float:none;
}
}

Upvotes: 1

Charbz
Charbz

Reputation: 536

Your problem is best resolved by natural design patterns without resorting to media queries. Think about it this way , if you lay out your columns side by side using css float:left; and you define some min-width value per column. then as soon as the screen width becomes smaller than the width value you defined X 3 , your columns will be laid out vertically

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50149

A simple media query can do this.

/* Apply inner styles if the viewport's width is at least 500px */
@media (min-width: 500px) {
  .responsive {
    width:33.3333%;
    float:left;
  }
}
<div id="Master_Div">
  <div class="responsive" id="Div_1">
    <p>abc</p>
  </div>
  <div class="responsive" id="Div_2">
    <p>def</p>
  </div>
  <div class="responsive" id="Div_3">
    <p>ghi</p>
  </div>
</div>

Upvotes: 0

Dmitry Sadakov
Dmitry Sadakov

Reputation: 2158

Yes, there are media queries that allow you to control layout for mobile screens, ex:

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

 /* stack vertically */

}

Upvotes: 0

Related Questions