Classic Block Grid & Responsive Design

[Rottenegger]

Hi there
I have a problem with a “Classic Block Grid” element: on screens with 768px & up it looks great with two columns. But on screens with 481px-767px the content (text) is shown in one column, while the block grid background shows still 2 columns and the right column is empty. Is it possible that the whole block grid element changes at the same screen resolution from 2 columns to 1 column?
Thank you! ak

[rad]

Hi Christian,

Thanks for reaching out.

The block grid has an intentional layout like that since it has to be a grid. If it should function as columns then I recommend utilizing the columns. It also doesn’t have HIDE DURING BREAKPOINTS like the v2 elements, so visibility can’t be controlled.

Displaying 3 columns on different rows doesn’t guarantee the same alignment when viewed on a smaller device since grid from each rows aren’t related.

Thanks!

[Rottenegger]

Thank you! But unfortunately this does not help. Using columns does not solve this problem. In order to responsive Design it looks even better with a grid. But the grid and the content of the grid should change with the same resolution.

[thai]

Hi Christian,

You can achieve that with the custom CSS:

@media (max-width: 767px){
    .x-block-grid.two-up>li {
        width: 100%;
    }
}

Please add the above CSS under Theme Options > CSS.

Hope it helps