Media query understanding and Bootstrap 4 with PInegrow

Pinegrow PRO
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:

4

I didn’t see a response, but I believe he’s discovered that he can stack classes:

<div class="col-md-8 col-lg-10">

However, if something needed to go away, you could modify it by attaching another class or ID and then targeting it:

<div class="col-md-8 col-lg-10 smallHide">

and then target div.smallHide with something similar to:

@media (min-width: 768px) {div.smallHide {display: none;}}

1 Like
5

oh, Stack Classes ok I will look that up. not aware of that.
Cheers @dcneuts