Grid not expanding full width / Responsive

[ywoolf]

Hi - I’m trying to get my site to look like this:
(https://dev.millcroftwindoors.com/faq)

And it’s looking like this:

I tried removing the image and just making the cell background but that didn’t work.

For Tablets and lower I’m going not want to have the image - do I have to make a different section for those breakpoints and turn off this section - or can I accomplish that with the same section?

Thank you very much - I’m trying to figure out the grid and can really use any help learning it.

Yitz

[friech]

Hi Yitz,

Thank you for writing in, the Grid element is great but I think you need more practice on that here’s a great video tutorials to help. Good thing you don’t need the Grid element for this to achieve what you need, just use the ROW and a 1/2 + 1/2 columns.

In the right column will be the image, please watch this tutorial on how to Breakout Images without turning off the inner container of the ROW.

With regards to that Orange/Brown background-color, you can apply that to the section as upper or lower background then use a custom CSS to fill only 90% of the section height.

Hope it helps,
Cheers,

[ywoolf]

Thank you so much - I realized last night that I probably could have used columns but didn’t know about the 90% height css option nor the breakout columns. So happy you taught me this.

[tristup]

Hi Yitz,

Glad that we are able to help you.

Thanks

[ywoolf]

Hi - I tried following the directions and for some reason, it’s not working for me. Do you think you can help me figure out what I’m doing wrong? Thank you.

[ywoolf]

I also can’t seem to figure out how to adjust the background color to only fill 80% of a section… as you can see in the CSS.

[friech]

Hi @ywoolf,

Ok I did go ahead and fixed it. I’ll explain what was the issue, regarding the image you applied it as an image element. The breakout Image method is supposed to be a background-image, that is why the CSS code did not take effect on your Image element.

Regarding the background-color, it is supposed to be a lower or an upper layer background (https://prnt.sc/133tpfu) so it can have its own div where we can apply the height: 75%, you can see the CSS code I’ve added on the Page > CSS together with the break-image CSS code.

.widescreen > .x-bg > .x-bg-layer-lower-color {
	height: 75%;
}

If you need the FAQ headline to get a bit lower, just apply a top margin on it or add a gap element on top of it.

Hope it helps,
Cheers!