Docs

[Lance B]

When adjusting the size of the screen from larger to smaller, the grid will be fine, showing two rows of three, then breaking showing one row of three, then two on one row, then one on a third row, then when the screen is a little smaller it puts them back together into two rows of three. What’s up with that? See the two screenshots attached.

[Prasant Rai]

Hello Lance,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

[Lance B]

advancedbiology.com

[Friech]

Hi There,

Thank you for the URL but did you remove the “tattoo” column? We can not replicate the issue, the grid looks like this on smallest screen.

http://prnt.sc/e2yvaw

[Lance B]

I’m sorry – try it on this page:

https://www.advancedbiology.com/powerful-workout/

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width: 979px){
.x-block-grid.three-up>li:nth-child(3n+1) {
    clear: both;
}
}

Hope that helps.

[Lance B]

Thank you, but now it’s doing this. I have tried everything after adding the code above. I really need to resolve this as I also need to add more rows and I want it to look good with a lot more traffic hitting the site and sales are critical. Thank you so much!

[Christopher]

Hi there,

Please add this code:

@media (max-width: 979px){
.x-block-grid.three-up>li {
    width: 28%;
    margin: 0 1% !important;
}
}

Find this code and remove margin properties:

@media (max-width: 979px){
    .x-block-grid.three-up>li:nth-child(3n+1) {
        clear: both;
        margin-right: 2% !important;
        margin-top: 2% !important;
    }
}

Hope it helps.

[Lance B]

Awesome! One final question: Is there a way to make the block grid center no matter what size the screen is? See attached…

[Lely]

Hello Lance,

Please also try adding this custom CSS:

.x-block-grid {
margin: 0;
}
.x-block-grid .x-block-grid-item {
float: none;
display: inline-block;
}

Hope this helps.

[Rue Nel]

Hello There,

Thanks for updating in and for sending us the screenshot. To make sure that the block grid items are always at the center, please have the code from our previous reply updated and make use of this code instead:

@media (max-width: 979px){
  .x-block-grid {
    width: auto !important;
    text-align: center;
    margin: 0 auto;
  }
  
  .x-block-grid.three-up>li {
    width: 31.333%;
    margin: 0 1% !important;
  }
}

Please take noticed that I have adjust the width from 28% to 31.333% to have a balance width.

Hope this helps. Please let us know how it goes.

[Lance B]

That works beautifully! Thank you!!!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts