Page 1 of 1
Responsive Layout grid
Posted: Fri Sep 27, 2024 4:50 pm
by girija.mahapatra
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
Re: Responsive Layout grid
Posted: Fri Sep 27, 2024 4:58 pm
by Pablo
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.
Re: Responsive Layout grid
Posted: Sat Sep 28, 2024 2:09 pm
by girija.mahapatra
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
Re: Responsive Layout grid
Posted: Sat Sep 28, 2024 2:13 pm
by girija.mahapatra
I changed height to "auto" but result is same (Uneven height)
Re: Responsive Layout grid
Posted: Sat Sep 28, 2024 3:07 pm
by Pablo
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.
Re: Responsive Layout grid
Posted: Sat Sep 28, 2024 4:00 pm
by crispy68
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.
Re: Responsive Layout grid
Posted: Sat Sep 28, 2024 4:19 pm
by girija.mahapatra
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
Re: Responsive Layout grid
Posted: Sat Sep 28, 2024 4:50 pm
by crispy68
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.
Re: Responsive Layout grid
Posted: Sat Sep 28, 2024 5:10 pm
by girija.mahapatra
Dear crispy68,
You had been a savior always. I have zero knowledge in coding.
Can you please help where to insert this code ?
Re: Responsive Layout grid
Posted: Sat Sep 28, 2024 6:08 pm
by crispy68
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.
Re: Responsive Layout grid
Posted: Sat Sep 28, 2024 6:14 pm
by girija.mahapatra
Thank you crispy68, for helping out.
I am exploring cards and it is promising. Will update after I get my result.
Thanks again
Regards
Re: Responsive Layout grid
Posted: Tue Oct 01, 2024 9:30 pm
by MAX_CDF
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.
Re: Responsive Layout grid
Posted: Mon Oct 07, 2024 6:10 pm
by girija.mahapatra
Heartfelt thanks to crispy68 and MAX_CDF
Did set a minimum height and a maximum height and it worked best for me.
Regards,
Girija