Re sizing issue in grid layouting | Community
Skip to main content
vasimakram
vasimakram
New Participant
December 8, 2015
Solved

Re sizing issue in grid layouting

  • December 8, 2015
  • 2 replies
  • 722 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by kautuk_sahni

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;
  }


@590883 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

2 replies

kautuk_sahni
kautuk_sahniAccepted solution
Employee
December 8, 2015

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;
  }


@590883 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

Kautuk Sahni
edubey
edubey
New Participant
December 8, 2015

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.

Terms & ConditionsAccessibility statement

Loading footer...