Making section background flush with Envira Gallery

[designerwriter]

How do I make the light grey background flush and lined up with the Envira Gallery width? See screenshot. I have tried everything, changing the numbers etc.

[prakash_s]

Hello Grace,

Thanks for writing to us.

It might be coming from the Row or column background, It is not possible to debug your issue with only a screenshot. I would request you please share the exact page URL so that we can advise you properly.

Thanks

[designerwriter]

I sent you a secure note prakash. I thought I had to fix it from the section not the row. That’s interesting.

designerwriter

[ruenel]

Hello Grace,

You cannot apply the background color to the section because the maximum width of the Envira gallery is not the same as the global container or even the width of the section. You will need to remove all the paddings and margins of the Section, Row, and Column. You will then need to insert a DIV element inside your column and then the Text element will be on the Div element as well. The structure will be like this:

In your Div element settings, this is where you insert the background-color rgba(0, 0, 0, 0.03) and then set up a maximum width of calc(100% - 20px) which means that the total width minus 20 pixels because there is a left and right margin added to the grid items.

Hope this makes sense.

[designerwriter]

I will try it and brb. It looks great ruenel! I just decided to make the paragraphs justified which I will do for all of the pages where there is copy.

So how do I change this page to make the copy 750px wide to match the width of the photo? I want to make this the same width on all of the pages. I am not putting the grey box as a background because I don’t want this section to look too boxy.

https://eagleheartdynamic.com/beleza-swimwear-2-graphic-design/

[ruenel]

Hello Grace,

You will have to edit the page, click the Text element, and set a maximum width of 750px and the left/right margin to auto.

If you want that most of your pages will have a 750-pixel wide container just like this:

You will need to do the following:
1.) Edit all your pages and change the page template to Blank - No Container | Header, Footer page template. For more details about the different page templates in the theme, please check this out:

• https://theme.co/docs/page-settings#page-attributes

2.) Go to Cornerstone > Theme Options > Layout and Design and change the Site Max Width to 750 pixels.

Best Regards.

[designerwriter]

So ruenel is this an either or option or do I have to do both? Can’t I just change the Text element as you suggested or do I have to apply the second option? How much work is it to change the page template? If it means redoing everything, forget it! I can however, change the text to 750 and auto.

Ok I tried the first option and it’s the easiest option even though I have to go through each page which is ok because once’s it’s done, I don’t have to do it again which is a good thing! lol

[ruenel]

Hello Grace,

• If you have a few pages that need to have a maximum width of 750 pixels, you can edit those pages individually and change the maximum width of the Text element.

• If you have several pages or all of your pages must have a 750-pixel width, you can do the second option. Changing a page template does not mean redoing everything. You will just have to change the page template from using the default page template or Layout - Fullwidth page template to the Blank - No Container| Header, Footer page template. You can even preview the page while you are editing in Cornerstone, Kindly check this out:

Step 1 for the Option 2:

Step 2 for the Option 2:

Repeat step 1 and step 2 if you have more pages that is using the default page template or any other page template.

Step 3 for the Option 2:

Hope this helps.