Want to reduce the container height on mobile devices.

Hi Rohan,

I'm not sure I understand correctly.

To clarify, are you wanting to make the Grids appear in 2 columns as well on mobile to reduce the Container height?

I want to show this type of rows on mobile: https://tinyurl.com/2p2sy2p3

I see. Can you first place the Date and the Term Headline Blocks inside a 2-column Grid Block?

On Desktop view, you can set their width to 100%, and on mobile view, you can set it to 50% so that they're on the same line.

Then, reduce the font-sizes on mobile as well to reduce the space the text occupies.

Let us know how it goes.

I did what you told but still the container sizes are huge. Here is it: https://tinyurl.com/2npopq8j. I want the featured image and the text to be small like: https://tinyurl.com/2p2sy2p3

Thanks

Any update regarding this ?

Hi there,

you have to consider every part of the design that will affect the height of that container.
First switch to mobile preview:

1. The column containing the image reduce its width eg. 25%.
2. The column containing the content increase its width eg. 75%

This will give more room for the content, reducing the chance text reflows to many lines.

2.1 Reduce the columns padding
2.2 Reduce the typography sizes and top/bottom margins of any headlines in the content.

3. You may want to consider removing the Read more button, if you have GB Pro then you can Hide on Mobile from the Advanced panel of the block.

Okay thank you.

You're welcome