Pinegrow Community Support Forum

Media query understanding and Bootstrap 4 with PInegrow


#1

Hello,

I am a bit confused with Pinegrow and Bootstrap 4 when it comes to hiding a column where the mobile reaches a certain size while increasing the adjacent column width.

Here is a code example of what I mean:

Here is what I have:

<div class="container">
  <div class="row">
    <div class="col-md-2">
      column of 2
    </div>
    <div class="col-md-8">
      column of 8
    </div>
    <div class="col-md-2">
      column of 2
    </div>
  </div>
</div>

When the mobile size is md, sm or xs, I would like the first column of 2 to hide and the adjacent column of 8 to become 10 for all the devices that start on lg like this:

<div class="container">
  <div class="row">
    <div class="col-md-10">
    column of 10
    </div>
    <div class="col-md-2">
      column of 2
    </div>
  </div>
</div>

I tried to use the media query and can manage to hide the column when the screen size is below 992(md) but what I cannot manage to do is tell PInegrow to resize the column of 8 to 10 when reaching the lg size.

Any idea how to do this with Pinegrow and bootstrap 4, please?

Thanks.


#2

OK I worked it out, you need to use the xs,sm,md and lg settings in the layout area.


#3

Well done @Bennybo ! :slight_smile:

could you also post the resulting code or screen capture of what you did for others as you wont be alone in this quest - er, while you still remember how to do it :slight_smile: