• I’m replicating a site from an old WordPress child theme done about nine years ago to a child theme of 2023 on Full Site Editing. On the first page there’s some intense html with nice effects we still like, so I’ve imported it as custom html. The original is at https://signageindustries.com/. If you’ll look at the link above, (https://signageindustries.com/new/, there is a black space above and below every image that’s cluttering things up. I have searched and searched through all the css via ‘Inspect’ and cannot find anything.

    I’m using Greenshift with this. It seems the most comprehensive of the block plugins. I have an ambition of re-doing my sites with zero stylesheet content. All formatting being done in FSE and blocks. If anyone knows of a more comprehensive block plugin, I’d be interested in recommendations.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator jordesign

    (@jordesign)

    Hi @keress – great to hear you’re approaching things in a Block theme with Site Editing!

    The original is at?https://signageindustries.com/. If you’ll look at the link above, (https://signageindustries.com/new/, there is a black space above and below every image that’s cluttering things up. I have searched and searched through all the css via ‘Inspect’ and cannot find anything.

    I do see what you mean – it’s definitely that importing/pasting HTML content may still be affected by the styling of the theme a little – but that will be something you can tweak.

    In terms of the Gaps themselves – if I look at the code I can see that above and below the images there are some empty Paragraphs <p>&nbsp;</p> which will be what is added the spacing. For example – you can see them in this code from the page

    <li class="projsecond">
    <p>&nbsp;</p>
    <div class="hover">
    <div><span class="title">Wall Signs</span><span class="viewmore cta"><br>Learn more about this kind of sign</span></div>
    <p>&nbsp;</p>
    </div>
    <figure><img decoding="async" src="/wp-content/uploads/vistas-hp.webp" alt=""></figure><div class="thumb"></div>
    <p>&nbsp;</p>
    </li>

    As a first step – I’d recommend reviewing the HTML you’ve entered to make sure there are no paragraphs included, or empty lines in the code.

    Could you please give that a try?

    I’m using Greenshift with this. It seems the most comprehensive of the block plugins. I have an ambition of re-doing my sites with zero stylesheet content. All formatting being done in FSE and blocks. If anyone knows of a more comprehensive block plugin, I’d be interested in recommendations.

    To be honest – I can’t really speak specifically to certain plugins. In terms of formatting with Blocks themselves the Editor and Site Editor on their own should really be able to handle most of those things.

    If there are specific things you’re having trouble with formatting – that’s always helpful to know – as it could help indicate things that can be made better.

    Thread Starter keress

    (@keress)

    Yeah, I found those empty paragraphs and removed them, and it got worse! LOL. I spent the day learning how to do the same effects with Greenshift and am making headway. It would be nice to know where this problem is coming from, but if I’ve got to sink in some learning curve, it’s better to be moving forward than figuring out how to shore up the past. Thanks so much for your efforts. If I hear back from Greenshift with a solution, I’ll let you know.

    Moderator jordesign

    (@jordesign)

    Hi @keress – taking a look at https://www.signageindustries.com/new/ I see the layout is now much closer to what you were aiming for (from the original site). I take it this is while using the Greenshift plugin.

    Do you still have an example I can see where you have the gaps above/below the images (with the paragraphs removed)?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Hidden margins or padding for images’ is closed to new replies.