Can Newspaper reproduce the Newsmag mobile Big Grid layout?

Posted in: Newspaper
Post count: 3

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?

Screenshot

Thank you!

  • This topic was modified 1 month by sigmar73.
  • This topic was modified 1 month by sigmar73.
Post count: 20685

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!

Post count: 3

Hi,

Yes, I am using Big Grid Flex 2.

If you can provide the CSS solution to make the mobile layout display like the Newsmag example, that would be great.

Thank you!

Post count: 20685

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!

Post count: 3

Hi,

Thank you — this worked perfectly.

The Big Grid Flex 2 now displays correctly on mobile, much closer to the Newsmag layout I wanted.

I’ll test it further on different screen sizes, but so far it looks good.

Thank you for the quick help!

Viewing 5 posts - 1 through 5 (of 5 total)
You must be logged in to reply to this topic.