How to correct padding for a v2 theme section using a page builder app?

Hello, we are trying to add a section into the v2 theme using a page builder app, however, we can’t understand the correct padding - so our imported section matches the Shopify section. Perhaps, somebody could quickly assist us? A sample picture is below.

We tried to put 52.5px padding to this section inside the page builder app, but it didn’t align correctly.

Page: https://swish.eu/pages/escalade-sports

Password: e

Kind regards,

Hi,

Ive found a solution, you need to add a page-width class to the div with class shg-box-vertical-align-wrapper. You can then remove the padding that you’ve added and everything should align perfectly.

Hey @jakeclifford ,

Thank you very much! Perhaps you have any ideas of how we can do it?

Your using Shogun right ?

If you click on the section you should see in the right hand menu options at the bottom Custom CSS with an option to add CSS Class and type in page-width

That should work

Hi @jakeclifford ,

Can’t express how much we appreciate your support! It worked, but unfortunately, the section isn’t centered. Any advice? Yes, Shogun.

I think you should be able to add a html section to the top of you page. An paste in the following:

.page-width {

justify-content: centre

}

It shouldn’t take up any space on the live website as its just for styling

Actually that won’t work sorry

it’s ok, thanks! hopefully, someone else can help us fix this.

Okay I have one more suggestion

Can you create an empty section, and put the section you are creating inside that section. The inner section should have page-width as a custom class.

Hi @jakeclifford ,

Great to see that you are still here! :slightly_smiling_face: We tried putting the previous container into another container, but unfortunately, it didn’t center the content.

Ahh okay, you can experiment with the margins on that inner section but don’t have any other suggestions without accessing the site.

Hope you find a solution!

FIX

Hey guys, in case someone else runs into this issue on the Refresh theme - in the Shogun page builder, we set the max width for this container to 1155px and the margin on the sides to “auto”. Finally, put this edited container into a blank container. It’s not perfect, because sizes differ for desktops, tablets, and mobile phones, but by setting individual padding for each screen type, we got things done. Hope it helps anyone else to create custom sections for Shopify v2.