Responsive Layout grid

girija.mahapatra · Post by **girija.mahapatra** » Fri Sep 27, 2024 4:50 pm

Dear All,

I am using Layout grid for my whole website. When I am using a layout grid individually, it resizes perfectly when page size decreases or maximizes. But when I use a multi section layout grid, the text content size inside every box overflows differently. If I use a fixed column height, it also resizes differently. Have attached a single page project for reference.

How to maintain layout grid responsiveness when the page varies from minimum to maximum ? No problem if the font size decreases but each box size should resize equally.

https://docs.google.com/document/d/1wDy ... ue&sd=true
https://drive.google.com/drive/folders/ ... drive_link

Regards
Girija

Post by **Pablo** » Fri Sep 27, 2024 4:58 pm

First, you should not use a fixed height in flexible layouts otherwise the text and other objects cannot overflow.

Can you please describe where in the project I need to look because there is a lot of content?
Please try to keep your demo project simple. Otherwise it will take me a lot of time to figure out how to help you.

See also:
viewtopic.php?f=10&t=82134

Also note that support on version 17 has ended.

girija.mahapatra · Post by **girija.mahapatra** » Sat Sep 28, 2024 2:09 pm

Inside LayoutGrid46,

LayoutGrid48, LayoutGrid49, LayoutGrid50 show different sizes when page size is varied from minimum to maximum. Also bottom of all three layout grids are not at the same level even though they are inside same LayoutGrid46.

How to maintain the same size for all three LayoutGrid ?

Regards

girija.mahapatra · Post by **girija.mahapatra** » Sat Sep 28, 2024 2:13 pm

I changed height to "auto" but result is same (Uneven height)

Post by **Pablo** » Sat Sep 28, 2024 3:07 pm

Can you please read this?
viewtopic.php?f=10&t=82134

And then update your project, so I do not have to go through hundreds of settings to figure out how to help you.

crispy68 · Post by **crispy68** » Sat Sep 28, 2024 4:00 pm

Keep in mind, that the contents inside of a layout grid will determine the height of the grid. If one grid has more text and depending on how it wraps, it will affect the overall height. You have the grids set to 75vh which but the problem you will have is if the content becomes longer/taller than what 75vh is then it will overflow the container. The amount of text you have will most certainly overflow on a phone as it will be longer than 75vh.

You could try adding min-height css code to the grids so they are at least a minimum height and then add a breakpoint and change the height to auto at some point for mobiles.

Another option would be to use cards in a card container.

girija.mahapatra · Post by **girija.mahapatra** » Sat Sep 28, 2024 4:19 pm

New minimal link

https://docs.google.com/document/d/1-dy ... ue&sd=true

I am looking help on:
1. Each box in a layout grid section (multi sections are there) should have same size when browser size changes between minimized to maximized. That should be independent of the content amount in each box

Regards

crispy68 · Post by **crispy68** » Sat Sep 28, 2024 4:50 pm

That should be independent of the content amount in each box

Then you will need to set a minimum height. A grid is flexible so it is only as big as the content inside. If you require the same height then you will need to set the grid height to auto and use CSS to set a minimum height.

Example:

Code: Select all

<style>
#LayoutGrid50,#LayoutGrid48,#LayoutGrid49{min-height:400px;}
</style

Keep in mind though once the minimum height is reached, the height will then be based on the height of the content.

You may be better off using cards like I mentioned before.

girija.mahapatra · Post by **girija.mahapatra** » Sat Sep 28, 2024 5:10 pm

Dear crispy68,
You had been a savior always. I have zero knowledge in coding.

Can you please help where to insert this code ?

crispy68 · Post by **crispy68** » Sat Sep 28, 2024 6:08 pm

You can add it either via the page html between <head> tags or insert it using a html code box in the same section.

I would advise you to check out using cards in a card container to achieve the same results.

girija.mahapatra · Post by **girija.mahapatra** » Sat Sep 28, 2024 6:14 pm

Thank you crispy68, for helping out.

I am exploring cards and it is promising. Will update after I get my result.

Thanks again
Regards

MAX_CDF · Post by **MAX_CDF** » Tue Oct 01, 2024 9:30 pm

I think using CSS to set a minimum height for the layout grids is a good approach. You can also experiment with different values to find the one that works best for your design.

girija.mahapatra · Post by **girija.mahapatra** » Mon Oct 07, 2024 6:10 pm

Heartfelt thanks to crispy68 and MAX_CDF

Did set a minimum height and a maximum height and it worked best for me.

Regards,
Girija

www.wysiwygwebbuilder.com

Responsive Layout grid

Responsive Layout grid

Re: Responsive Layout grid

Re: Responsive Layout grid

Re: Responsive Layout grid

Re: Responsive Layout grid

Re: Responsive Layout grid

Re: Responsive Layout grid

Re: Responsive Layout grid

Re: Responsive Layout grid

Re: Responsive Layout grid

Re: Responsive Layout grid

Re: Responsive Layout grid

Re: Responsive Layout grid