Odd CSS Issue

  • Unknown's avatar
    pickil11 · Member ·

    So I have a page for each one of my books. Every book page is exactly the same sans the cover and the blurb. The images for the covers are exactly the same size, the class is set to the same etc.. I literally copy the previous book in the series change the cover pic, change the blurb, and update the links.

    So anyway, so I have the page https://KaydeeRobins.com/Kelseys that had a cover coming soon image that was the same size as the final cover. I went to update the cover from the temp to final cover and now the padding is all jacked up. I’ve gone over the coding for https://KaydeeRobins.com/Ginger and this page and EVERYTHING is exactly the same sans the image source and the paragraphs. All the HTML and the CSS are exactly the same. It is literally like the HTML is ignoring the CSS class attached to the image.

    I tried chatting with support and they couldn’t figure it out so I’m posting here to see if someone else can.

    The blog I need help with is: (visible only to logged in users)

  • ericfri · Staff ·

    Hi there,

    It looks like the correct image is contained in a <div> with the classes wp-block-image PageCover and on the page where it’s incorrect, that div isn’t there.

    It looks like it should be div->figure->image.

    Editing the page source in the dev tools confirms this makes it look correct.

    I’m not sure how you put the page together, but it seems like the containing div was erased by mistake. Adding it back should fix it.

    I hope that helps.

    Cheers,
    Eric

  • Unknown's avatar
    pickil11 · Member ·

    I thought I saw the same thing when I glanced over it, but when I went back and forth it was exactly the same, I just did a ctrl+f on the page and there are exactly 18 div instances on both pages…

    I even pasted the code in an excel file and did the highlight duplicates so I could see if any code was on one that wasn’t on the other.

  • ericfri · Staff ·

    Did you use the View Source Code or the Dev Tools inspection?

    The inspection will often vary if Javascript has edited the DOM.

    Here is the incorrect HTML – https://ibb.co/2FkySGj
    And the correct one – https://ibb.co/1QpcDZy

    Do you see the difference between them?

  • Unknown's avatar
    pickil11 · Member ·

    OMG YES!

    When I look at the code for the page in WordPress editor there is literally nothing different…

    I didn’t think to look at the div. Now the question is can I fix it since the code in the editor are exactly the same it seems like WordPress did something in the last update to f**k it up, not that I’m surprised seems like every time I turn around something breaks on my website without me doing a dang thing… Grr anyway thanks for the extra eyes.

  • ericfri · Staff ·

    Without seeing your editor, I don’t think I can help any more.

    I suspect there is a parent div that’s incorrect that isn’t being shown on screen.
    Are you using the block editor or the classic editor?

  • Unknown's avatar
    rpsonowal · Member ·

    Here is a quick solution for you if you don’t want to touch the HTML code in the editor.

    body.page-id-1548 .wp-block-image.PageCover {
    margin: 0 20px 10px 0!important;
}

    This will make the spacing around the image similar with the other page. I hope this will help you but I must admit this may not be a perfect solution.

  • The topic ‘Odd CSS Issue’ is closed to new replies.