Cornerstone sections - reduce space between

[pearlmultimedia]

I’ve noticed that since I updated Cornerstone, it seems to add larger white spaces between my sections within a blog post. I keep trying to get rid of them using the margin settings for each section. But they’re still too large – and it takes a long time.

Is there some Global CSS I can add to reduce it automatically?

Here’s an example of what I mean.

I have every top and bottom margin for every section set to zero right now. Yet there’s so much white space between sections (the intro is one section; the photo is one section; the body copy is one section; and the CTA is one section). Any advice? Thanks!!

[Prasant]

Hello @pearlmultimedia,

Thanks for asking.

I checked your website and the link you have shared and it seems that the spacing is coming because of section padding. Let me share a screencast to illustrate the point.

Now, you have mentioned that already margin property has been adjusted. I think you haven’t activated Advanced Mode under X > Settings > Permissions > Administrator > User Preference > Advanced Mode and select Always On.

After that open the post and relevant sections to adjust padding property. Here is a screencast to help you out.

After adjusting Section paddings you need to adjust Image, paragraph and heading margin to further optimize the spacing. Here is a screencast to help you understand. Please adjust the margins and spacing should fall in place.

Although not recommended but if you want a custom CSS option to adjust the spacing, please add following CSS under X > Theme Options > CSS:

.single-post .x-section {
    padding: 15px 0 !important;
}

.single-post .x-text img {
    margin-bottom: 15px;
}

.single-post .x-text p {
    margin-bottom: 15px !important;
}

.single-post .x-text h2 {
    margin-top: 10px;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[pearlmultimedia]

Thanks, Prasant. I always work with advanced settings on. Did they get automatically turned off by the update? I kept wondering where they’d gone… Also did ThemeCo send out an email about it to users? If so I didn’t get it. This is a major change and now it’s the second time I’ve accidentally discovered things that need to be turned on… Anyhow thanks for the heads up!

[ruenel]

Hey There,

The setting is turned off by default. We have announced the changes in our changelog. You can check it out here: https://theme.co/changelog/

Best Regards.

[pearlmultimedia]

Thanks. I will have to pay more attention to those.

[Prasant]

You are most welcome.