Padding in blog and woo commerce

Hi there

we are working on a site using Pro as the wordpress theme. Now whilst I have made several hundred sites I am a late convert to wordpress and this is my first involvement with using Pro

so… padding there are a couple of pages where this is needed - single blog pages being a good example, also one of the shop pages - See https://www.healinglight.co.uk/post-format-standard/ is a good example of the padding issue

I could do with 20px or so padding to right and left margin - could you tell me how this would best be achieved in pro please?

Hello Richard,

Thanks for writing in!

To resolve your issue, simply go to Pro > Theme Options > Layout and Design. The Site Max Width should be at least 1200 pixels. And then the Site Width could be at least 96% or less leaving 2% at each side as a gap or margin.

If you have made this 100% because you were creating a fullwidth page, you will need to edit your page and change the page template to layout - Fullwidth or Blank - No Container | Header, Footer. For more details about the different page templates in the theme, please check this out:

Hope this helps.

thank you :slight_smile:

You are most welcome Richard!

Hi, sorry to re open this .

basically on this project its the single blog page I am hving the side margin difficulties no where else

https://developer.wordpress.org/themes/template-files-section/post-template-files/ I did look at this for the page,php and single.php
and there is something like this in the page code:
x_get_view( x_get_stack(), ‘wp’, ‘single’ );

Now do I need to edit the code to get the desired result ( a 20px margin to the right and left of the page content) or is it possible from within the theme?

Thank you for the ongoing help

Hello Richard,

Actually, you do not need to edit the theme if you really want have a 20 pixel margin on the left or right of the page. You can set the it by adding the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-post .entry-content,
.page .entry-content {
    padding-left: 20px;
    padding-right: 20px;
}

We would love to know if this has worked for you. Thank you.

thank you

I was editing in the wrong place!
a case of going to appearance / themes / customise and adding the css there - silly me
Yes thats perfect thank you

Now another question if I may - I am looking to sort the checkout page out
https://www.healinglight.co.uk/healing-light-checkout/
with this I need to apply padding around the woocommerce elemnts
I have tried woocommerse-checkout and applying padding there but stell hard left aligned
Any pointers to thecorrect css element I need to edit?

Thank you

Hi Richard,

You can update the the given CSS code to:

.woocommerce-cart .entry-content,
.single-post .entry-content,
.page .entry-content {
    padding-left: 20px;
    padding-right: 20px;
}

Notice the .woocommerce-cart .entry-content that’s the selector for woocommerce-cart page.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

thank you :slight_smile:

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.