Re sizing issue in grid layouting

[vasimakram]

In layouting mode I kept four components set side by side (desktop.jpeg).

In mobile resolutions I want all four components to lie one below the other, which I'm able to achieve(mobile.jpeg). But the problem is, I want each of them to take 100% width of the display as shown in second image. I'm not able to achieve this. Is there any solution or a clue which will point me in the right direction.

[edubey]

This is not a AEM specific question but more of CSS.

As far a I know you might have to alter the media queries in CSS to achieve this.

[kautuk_sahni · Accepted solution]

Hi 

Please find below what you want:-

Link:- http://jsfiddle.net/4KUUt/3/

Default View (Desktop)

Mobile View

HTML

   <div class="section group">
    <div class="col span_1_of_3 a">This is column 1</div>
    <div class="col span_1_of_3 b">This is column 2</div>
    <div class="col span_1_of_3 c">This is column 3</div>
 </div>

CSS

.a {
  background-color: #CCF;
}

/* line 14, ../sass/test.scss */
.b {
  background-color: #CFC;
}

/* line 17, ../sass/test.scss */
.c {
  background-color: #FCC;
}
.span_1_of_3 {
    width: 32%;
    float: left;
  }

@media only screen and (max-width: 480px) {
  /* line 24, ../sass/test.scss */
  .span_1_of_3 {
    width: 100%;
  }

}

Copy paste above mentioned code in provided jsfiddle link.

I hope this would help you.

Thanks and Regards

Kautuk Sahni