[Resolved] Add margin to right of image

Home Forums Support Add margin to right of image

  • This topic has 18 replies, 3 voices, and was last updated 11 months ago by David.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1039102
    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.

    #1039224
    Leo
    Staff
    Customer Support

    Hi there,

    Yes we’d need to see it 🙂

    Let me know when you publish it.

    #1040456
    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

    #1040529
    Leo
    Staff
    Customer Support

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

    .wp-block-image .alignleft {
        margin-right: 0;
    }
    #1040749
    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

    #1040759
    Leo
    Staff
    Customer Support

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

    #1040792
    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

    #1040816
    Leo
    Staff
    Customer Support

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

    #1041210
    Linda

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

    Linda

    #1041527
    Leo
    Staff
    Customer Support
    #1042823
    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

    #1042858
    David
    Staff
    Customer Support

    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;
    }
    #1043215
    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

    #1043220
    David
    Staff
    Customer Support

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

    #1043836
    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

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.