How to remove section padding

Support
#1

I am not able to remove padding that is present by default on the sections. For example see this page

The main content area has a default padding of 60 px for all sections below the image. I would like the last CTA to not have that padding (and look like the image at the top). But I am not sure how to do that. Will appreciate any help.

See screen shot of Pro editor below for more information…

#2

Hello @amardeepmisha,

Thanks for asking. :slight_smile:

Please add following CSS under Pro > Launch > Theme Options > CSS to adjust padding in page layout:

.entry-wrap {padding: 20px;}

Thanks.

#3

Thanks Prasant.

I did not see the CSS option under Theme Options (for me Theme Options looks like the image below) so I added it to the Customizer -> Additional CSS.

But it did not do what I was hoping for. I was hoping to reduce the padding only for the CTA section and not for the text part of the post. I would like the bottom section CTA to look similar to the way the featured image at the top looks (see below) i.e. the text in the post should continue to have the padding but the CTA should not. Is that possible?

#4

Hi there,

The CSS section is there, with CSS icon :slight_smile:

And removing the padding will also remove the padding of your content. It’s the space between the container and the content. You can’t remove it just to that specific part. The featured image belongs to a different container and it’s outside that entry-wrap padding. Which means, to achieve that, you’ll have to move your CTA outside the main container.

Let’s try this out, please add this code to your cornerstone custom javascript ( it’s in your screenshot too, JS icon but in your cornerstone and not in theme options ).

jQuery( '#x-section-1, .el29.x-section' ).insertAfter('.entry-wrap');

Thanks!

#5

Thanks for clarifying where I should be looking for the JS and CSS icons. :slight_smile:

Your suggestion worked. I have a couple of follow up questions:

  1. I would like to save this CTA section as a Template block and add to all our posts. Since the ID of the section may change on other posts, is there a different way to target the CTA section in the JS so that it works on all posts (e.g. can I give it an ID in the Customize area of the section properties and somehow target all sections with that ID?) As you can perhaps gather, I am not a CSS or JS expert :frowning:
  2. Now there is an extra vertical gap above the CTA, caused by the 60 px bottom padding on the section above. Is there an easy way to remove that. Again I would like to do this on all posts.

I realize that once the dynamic section templates are available this will be simpler to do. But any help to do this in the meanwhile will be appreciated. Thanks again.

#6

Hi there,

  1. Please go to the CTA section options by clicking on the magnifying glass icon of that section and then click on the Customize tab. Then you will find a section to add a Class. Add for example cta:

Then you can use that in the code:

jQuery( '.cta' ).insertAfter('.entry-wrap');
  1. You can also add the Javascript code below after the previous code to strip out that padding:
jQuery('.cta').prev().css('paddingBottom', '0');

Thank you.

#7

Thanks! That did it.

#8

Glad we could help.

Cheers!

#9

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