www.wysiwygwebbuilder.com

Hello,

I am facing a challenge in my web design project and seeking some assistance. My page structure involves nested layout grids and sections. Here are the details:

I have used a layout grid, inside which I placed a section.
This section contains an image, followed by a flex grid below it.
Beneath that, I added another grid section.
In the preview mode, these elements are overlapping each other, disrupting the intended appearance of the page.
I have already checked the hierarchy and CSS classes, but the issue persists. Could someone suggest what might be causing this behavior and how I can resolve it? Could the problem be due to a conflict between the CSS properties for grid and flexbox?

Thank you in advance for any help.
images : https://ibb.co/4py6HfG
https://ibb.co/GTfGqD9

To be able to help you, I need a DEMO project (.wbs file) so I can see all your settings.
Also, please include a description how to reproduce this problem.

I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134

I have already uploaded the file as per our discussion. Here is the link to access it: https://ufile.io/6md4skfw

Thank you very much for your assistance.

You did not include the image in the downloads , so I cannot see what the layout is suppose to look like.
However, the sections do have a fixed height, which means they do not scale when the width of the page changes.
You can change this behavior by setting the height property of the section to 'aspect ratio'

Also, I am not sure why you are using a flex-gird while the rest are layout grids? I recommend to stick with one tupe of layout, to keep things simple.

I change aspect ratio and working thx for help.
Subject to close .