Docs

[Advasa]

Hello

I have used a 4 column block grid to create a table. It looks great on desktop however when it shows on mobile or tablet (portrait) it gets all muddled up due to it reducing the about of columns.
How can I keep the block grid looking the same so it just shrinks down in sized rather then reducing the amount of columns?

Thanks

Justin

[Advasa]

This reply has been marked as private.

[Paul R]

Hi Justin,

Please provide us your username as well.

Thanks

[Advasa]

This reply has been marked as private.

[Christopher]

Hi there,

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

@media (max-width: 979px){
.x-block-grid.four-up>li {
    width: 18.25% !IMPORTANT;
    float: left !important;
    clear: none !important;
    font-size: 15px;
    margin: 5% 5% 0 0 !important;
}
li.x-block-grid-item .x-btn {
    font-size: 12px;
    padding: 5px;
}
}

Hope that helps.

[Advasa]

Hi

Thanks for the response, it’s getting there 🙂

The block grid is now in 4 columns on mobile however the whole block grid is now hovering to the left and the block grid items aren’t in the same order as they are on desktop. Please see attachment.

Thanks

Justin

[Rad]

Hi there,

Please add this as well,

@media (max-width: 979px){
  .x-block-grid.four-up>li:nth-child(4n) {
  clear: right !important;
  }
  .x-block-grid.four-up>li:nth-child(4n+1) {
  clear: left !important;
  }
}

Cheers!

[Advasa]

Hello

Thank you, it is working now 🙂

For anyone else interested in achieving this result the 4th column seemed to be 3rd the second last so I adjusted the first bit of code to the following:

@media (max-width: 979px){
.x-block-grid.four-up>li {
    width: 20% !IMPORTANT;
    float: left !important;
    clear: none !important;
    font-size: 15px;
    margin: 5% 5% 0 0 !important;
}
li.x-block-grid-item .x-btn {
    font-size: 12px;
    padding: 5px;
}
}

Cheers

Justin

[Christopher]

Thanks for sharing.

[Author]

Posts