[Resolved] Custom margin at the bottom of Image Block

[Kerry]

Hello,
I recently switched themes from Wordsmith to explore. My previous theme had CSS applied to give me a 30px margin at the bottom of every image block.

/* this adds 30px after all GB images */
.entry-content .gb-block-image {
margin-bottom: 30px;
}

Now using Explore theme in staging mode, it’s not giving in the desired margin spacing. I’ve removed the css, saved, purged, refreshed and reapplied code with no luck.

Any advice? Have I missed something in this code that should be applied for new theme?

Thanks in advance for any help possible.

[David]

Hi there,

can i see the issue on your site ?

[Kerry]

It’s working on the current live site here:
https://corksandtacos.com/3-day-romantic-getaway-in-turks-and-caicos/

I’m not sure how to show you the new version in the staging platform within siteground….

[David]

They should provide you a staging URL ?

[Kerry]

https://staging2.corksandtacos.com/3-day-romantic-getaway-in-turks-and-caicos/?preview_id=6389&preview_nonce=bf53ffeaac&preview=true&_thumbnail_id=6486

Let me know if this works.
Thanks!

[Ying]

The link requires an admin login to be seen, can you publish the page for us to see?

[Kerry]

Hi,
I’m not ready to go live with the whole new theme. I’ll reach out for help after I publish the entire new theme.

I was concerned I hadn’t used the correct code seeing as it worked on the old theme.

I’ll reach out again when it’s live and easier to view.

Thanks anyways.
Kerry

[Ying]

Keep us updated 🙂

[Kerry]

Hello again,

I’ve fully deployed my staging site to a live site.

Using the css below on my previous theme (Wordsmith) it worked a charm. Now using in on the new theme (Explore) it doesn’t appear to be doing it’s job. Was hoping when I did the deploy of staging site, it might correct itself, but not to be.

/* this adds 30px after all GB images */
.entry-content .gb-block-image {
margin-bottom: 30px;
}

Here is a link of how the image blocks looks now with no spacing at the bottom margin (first two large images on the post).

Please note if you are searching through other posts, I’ve manually added the margin to some of the more recent posts to create a nicer visual for my readers.

Any help appreciated 🙂
Thanks
Kerry

[David]

Try this CSS instead, it will include the core Image block too:

.entry-content .gb-block-image,
.wp-block-image {
    margin-bottom: 30px;
}

[Kerry]

Just tried it and no luck. I also tried creating a new testing post in case it would activate on only new content.

I’m using the Simple CSS plugin. Should I perhaps uninstall that and retry?

I must be missing something somewhere…just can’t seem to figure this one out.

[Ying]

Try adding it to the customizer > additional CSS.

[Kerry]

Hi Ying,

I’ve removed the Simple CSS plugin entirely and now only using customizer > additional CSS.

When I add the code, it appears to function on pages, query loops and sidebar but not on the posts. Very bizarre.

Not sure if you can see anything behind the scenes that may be blocking this for page images.

[Ying]

I’m not seeing any CSS in the customizer >additional CSS:
https://www.screencast.com/t/0bOc0XTTH

Have you removed the CSS?

Let me know!

[Kerry]

I just did a purge, let’s see if it shows now 🙂

[Author]

Posts