Help with grid row spacing

Hi Rikard,

Hopefully this is more clear. I want to use a grid row in two different ways on my site. The first way is as a banner at the top of the page. Here is how I want it to look:

https://drive.google.com/file/d/1ipqyUlRmKIhMUtjGC1SnHbUp1tOY39zM/view?usp=drivesdk

The banner is full width here, which is what I want. Here is what it currently looks like:

https://drive.google.com/file/d/1P2tU7Zd4vLto4UMzonRxRY87TXx6PHVQ/view?usp=drivesdk

It is not fullwidth. The reason it is not full width is that I have another grid row on my site that looks like this:

https://drive.google.com/file/d/1m0P-OujEI95ySZY5oH9iQo0DJfie6ynv/view?usp=drivesdk

In order to get this grid row to not be full width, I added this code:

.av-layout-grid-container {
max-width: 950px !important;
margin: 0 auto !important;
padding-bottom: 5px !important;
padding-top: 5px !important;
}

I want the second grid row (the group of photos) to NOT be full width and I want the first grid row (the banner) to be fullwidth. The code above tells all grid rows to have a max width but I want the banners to be full width.

Can you help?

Thanks!
Julie

Hi Mike,

I think I’m following you but I can’t get it to work. I named the grid row that I don’t want to be full screen product_gallery and I put this in the custom css class field under developer settings. Then I modified the code to say:

.product_gallery .av-layout-grid-container {
max-width: 950px !important;
margin: 0 auto !important;
padding-bottom: 5px !important;
padding-top: 5px !important;
}

Now the header (the full screen grid row) looks good but the “product_gallery” grid row is off. This code doesn’t seem to effect it at all. Do you see anything obvious that I did wrong? I checked the other css code and I don’t see anything else than could affect this.

Thanks!
Julie

Hi Mike,

I have it on a test page. But your suggestion worked! Thanks!

Julie

Actually, I have another question. I have a grid row for the top of this page: https://ade-medical.z4pby1v9-liquidwebsites.com/blog/

I cannot get the teal area to be the same height as the image on the left, can you help? This is another grid row and the background of the cell is teal. I have a custom class and am using this code:

.blog.av-layout-grid-container {
max-width: 1250px !important;
max-height: 200px !important;
margin: 0 auto !important;
padding-bottom: 5px !important;
padding-top: 5px !important;
}

but the cell height is unaffected.

Thanks!
Julie

• This reply was modified 3 years ago by julhobart.