[Resolved] Add margin to right of image

[Linda]

Hi Supporters,

None of the forum posts I cecked were exactly right and this may be more of a Gutenberg issue than yours. However …

The text beside a left aligned (text on right) image in one blog is right up against the image. Is there a theme-based way I could add padding to the right side of the image? Or is there a bit of CSS I could add to make this work?

Your advice is always appreciated! 🙂

Thanks,

Linda

P.S. The blog isn’t published yet, but if you need to see it, please let me know and we’ll figure out something.

[Leo]

Hi there,

Yes we’d need to see it 🙂

Let me know when you publish it.

[Linda]

Hi Leo,

Okay, just published it so you could take a look. Here’s the link:
blog

Thanks for checking it out for me!

Linda

[Leo]

I see this CSS added in Additional CSS which is removing the default margin of 1em:

.wp-block-image .alignleft {
    margin-right: 0;
}

[Linda]

Aha, Leo. You figured out the issue! Thanks.

Hmm, that CSS was added earlier to correct a different image issue.

Where do you think I should go from here?

Can you tell what part of the site that CSS affects from what’s in the CSS itself?

If not, I guess I could remove it and see what happens elsewhere on the site. Or is that a dumb idea?

For now, I’ve unpublished the blog until you need to see it again. OK?

Linda

[Leo]

The CSS is setting all image blocks with align left option to margin-right: 0;

[Linda]

Got it, Leo.

Is there a way to add some CSS just to this blog to override the Additional CSS?

Or do you want me to go back in to my other threads here to see why we inserted that CSS originally?

Linda

[Leo]

Would be good to figure out why that CSS was added before and if you still need it.

[Linda]

Okay, Leo. I’ll search for the answer and post back once I have it.

Linda

[Leo]

Sounds good 🙂

[Linda]

Hi Leo,

Well, I found the code and have been trying to figure out what this code affects:

.wp-block-image .alignleft 
    margin-right: 0;

When I try changing it to 10 in Customizer, I can see no changes anywhere on the site. Or does Additional CSS not show up in Customizer until you publish?

Also, I get this message on the Additional CSS panel with and without changing the 0 to 10:
There is 1 error which must be fixed before you can save.
Update anyway, even though it might break your site?

Before doing anything, can you please let me know:
1. If I have to Publish to have different value show on site?
2. Can I publish with that error message?

Thanks,

Linda

[David]

Hi there,

your code is missing the { curly braces } it should look like this:

.wp-block-image .alignleft {
    margin-right: 0;
}

If you want to add 10px of margin the it must include the units ie.

.wp-block-image .alignleft {
    margin-right: 10px;
}

[Linda]

Hi David,

Thanks so much. I had inserted the “px”, but not the curly brackets! Will do so.

Question: Do these CSS changes in Customizer show as I’m doing them or only if I click ‘publish’?

I’m trying to figure out why we put in that CSS without breaking whatever that additional CSS was doing (although I guess I can just change things back if that happens).

Linda

[David]

If they are working then you should see the result immediately in the Customizer.

[Linda]

That’s good to have confirmed, David. I’m going to try adjusting the ‘0’ to ’10’ or even higher so I can see where the CSS is being applied. I’m frustrated not to be able to remember why I added that CSS; only remember it was early on and it was to correct something on the site. Agh!

Will post back results.

Thanks again,

Linda

[Author]

Posts