[Resolved] Remove space between one line of text and a specific image using WP block editor

Home Forums Support [Resolved] Remove space between one line of text and a specific image using WP block editor

Home Forums Support Remove space between one line of text and a specific image using WP block editor

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2351194
    Trish

    Hi,

    The image is labeled as wp-image-2853 and I tried to remove the space between one line of text and the image by adding the following code to the Additional CSS text box found under Appearance > Customize… but it didn’t work.

    .wp-image-2853
    {
        margin-top: 0!important;
    }

    Would like to have this work across the entire website where this image is used repeatedly.

    Can you please help me?

    Thank you in advance,
    Trish

    #2351210
    Fernando
    Customer Support

    Hi Trish,

    The margin is in the <figure> tag. You can try adding a class to the Image, and then use that class instead to target the figure.

    #2351597
    Trish

    Hi Fernando,

    But… I’ve understood that the figure tag is for ALL images and I only want one specific image targeted like this. By adding a class to the image’s “figure”, would that not cause ALL images to remove the space?

    #2351899
    Ying
    Staff
    Customer Support

    By adding a class to the image’s “figure”, would that not cause ALL images to remove the space?

    Correct. If you add a class to the image block, and your CSS is using that class, then you will only target this specific image block.

    #2351900
    Trish

    Hey Ying,

    But… then I’d need to add that class to EVERY post that image appears on… right?

    #2351946
    Ying
    Staff
    Customer Support

    Are those images the same file?

    If so, you can target the image title, using something like this:

    img[title="the-title"] {
         your CSS here;
    }
    #2352011
    Trish

    Hi Ying,

    If you mean the title as is shown in the Media Library… I tried that… even cleared the cache, but that too did not work. 🙁

    Thank you for trying.

    #2352644
    Ying
    Staff
    Customer Support

    It seems WP image block doesn’t include the title attribute to the image and the margin top is added to the figure tag.

    Maybe try this, instead of setting the figure’s margin-top to 0, we set the image’s margin-top to a negative value to do an offset.

    img[alt="photo of Trish with her name below that"] {
        margin-top: -0.5em !important;
    }
    #2352840
    Trish

    Still no difference… 🙁

    #2353566
    Fernando
    Customer Support

    I can see it working from my end. Can you try changing the value? Something like:

    img[alt="photo of Trish with her name below that"] {
        margin-top: -1.5em !important;
    }
    #2353628
    Trish

    BIG HUGS for you Fernando, you did it!
    THANK YOU!!!!!!!!!!!!!!!!!!!!

    #2353631
    Fernando
    Customer Support

    You’re welcome Trish! Have a nice day!

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