Hi,
I really like how Newsmag automatically changes the Hero/Big Grid section on mobile (see Screenshot). The first featured article stays large, while the next four articles are displayed in a clean two-column grid.
In Newspaper, the same section keeps the desktop layout and the smaller articles become horizontally scrollable instead.
Is there a built-in Big Grid, Flex Block, Cloud Library template, or responsive option that reproduces the same mobile layout as Newsmag?
Thank you!
Hi,
That is possible. It could be made with a section, meaning using multiple blocks, which can be arranged as needed on desktop and mobile.
But it could also be done with some CSS. Maybe this will be easier if you just want the grid to look that way.
In Newspaper are you using Big grid flex 2? -> https://prnt.sc/VYV3XQeAAqxP Let me know if that’s the case, and I’ll provide a solution to make it display as you want on mobile.
Thank you!
Please try something like this:
@media (max-width: 767px) {
div.td_block_big_grid_flex_2 .td-big-grid-flex-scroll-holder {
overflow-x: auto!important;
overflow-y: auto!important;
white-space: normal!important;
}
.td_block_big_grid_flex_2 .td-big-grid-flex-scroll-holder {
display: grid!important;
grid-template-columns: repeat(2, 1fr);
gap: 3px;
overflow-x: visible;
white-space: normal;
}
.td_block_big_grid_flex_2 .td-big-grid-flex-scroll-holder .td_module_flex_7 {
width: 100%!important;
flex: none!important;
}}
Then the Big grid flex 2 should look like this on mobile -> https://prnt.sc/BuxRJFJFWpqi
The code can be entered in the Live CSS in the admin bar, or in the theme panel custom CSS section. Maybe also clear the website cache to make sure the code applies.
Please give it a try and let me know if it worked or in case there are any problems with it.
Thank you!
