Issues with Grid

Hi there, I’ve just started using the Grid element, and have been playing around with layouts to see what’s what… I think I have it set up correctly in the builder, and its displaying as I would want it to, but when I view on frontend it falls apart… I have tried with the large image on the right as a bg image (which would be better). and also as an image element. Both versions are shown in the screen shots. Can anyone give me any pointers? Thanks

Hello Emmett,

Thanks for writing in! Are you using a background image on the right Cell? I would recommend that in that cell set a minimum height so that it will not collapsed to 0 height. I would love to check your grid for further suggestions to resolve your issue. Please provide us with your WP details. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

Thanks Ruenel. I’ve actually made some progress with this, there must have been an issue somewhere as the next day it started to react properly to my amendments and saves. Thanks again for the reply

No problem. We’re here for you whenever you need us.

Hi Ruenel/other staff,

I’m afraid I’m having issues with the grid element again, as it doesn’t seem to be reacting to the settings I’ve entered into certain device breakpoints. I’ll add a secure note so you can see what I mean

Here’s the mockup of how it should look on tablet preview…

Hello Emmett,

You need to adjust the Cell layouts to auto on smaller screens.

The Flex Direction of the Bar element should be Column:

Some margins may need to be adjusted on smaller screens as well.

Best Regards.

Thanks Ruenel, some of that has helped and I’ve made some progress on the footer design. At the start of this thread, I asked about that more complex grid with overlayed text etc… When reformatting this for different screen sizes, I’m again running into problems changing the layout to suit. Question: Is it best practice to hide empty cells on smaller screen sizes, for example, when going from 3 columns to 2, and the middle cell is empty? I’ve tried using auto placement, and also amending the x and y start/finish points for cells that span wider than 1 column, but still having issues.

Thanks again for the help

Hey Emmett,

I would not recommend hiding Cells or Columns on smaller screens because it will just give you duplicate content. Just use the Grid’s Cell layout and make sure to adjust the layout in different screen sizes. You may need to do it by sitting values manually and not using the Auto placement setting automatically.

Best Regards.