[Resolved] Want to reduce the container height on mobile devices.

[Rohan Verma]

Hello,
I am using the Generatepress and generateblock to create custom homepage layout. I want to show the more conatiner on mobile devics thats why I need to reduce the height of that container. here is what I have and what we need: https://tinyurl.com/2la4rngh

Thanks

[Fernando]

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?

[Rohan Verma]

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

[Fernando]

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.

[Rohan Verma]

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

[Rohan Verma]

Any update regarding this ?

[David]

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.

[Rohan Verma]

Okay thank you.

[David]

You’re welcome

[Author]

Posts