[Resolved] Header background color changed across all pages

Home Forums Support Header background color changed across all pages

  • This topic has 25 replies, 5 voices, and was last updated 7 months ago by Tom.
Viewing 11 posts - 16 through 26 (of 26 total)
  • Author
    Posts
  • #1437478
    Stefan

    Hi Elvin,

    That’s correct. I am using a Block Element > Hook > generate_after_header_hook.
    I do not know how to remove the <p> html tag on the website. I would appreciate it if you could help me with that.

    #1437489
    Elvin
    Staff
    Customer Support

    Here’s a demo video on how to remove it.
    https://share.getcloudapp.com/z8uZWpwd

    We basically check any stray/empty paragraph block using Block Navigation and select paragraph block through the list.

    After selecting the empty paragraph, we can then either:

    type “/” for the block options to show. We then browse through the options and click Remove block.

    or

    press Shift + Alt + Z

    or

    press backspace.

    Hope this helps.:)

    A wise man once said:
    "Have you cleared your cache?"

    #1437533
    Stefan

    Hi Elvin,

    Advancing past the noob level. πŸ™‚
    Thank you for that, I am getting the ropes of this slowly.

    Regards,
    Stefan

    #1437538
    Stefan

    Hi Elvin,

    Thanks for your help on the matter. Another follow up. What’s the intelligent way to make the home page appear in blue across all devices?

    After adding the Hook Elements, in the mobile version I need to slide to the right to see the rest of the web content. There are a few more pixels on the right that are not shown immediately upon entering the site. I think that Block Element hook (on all pages) is wider than the phone screen width for some reason. I use Samsung S10 on Chrome and Firefox browsers. I get the same results.
    – There is white space in the header section: https://prnt.sc/uep62r
    – There is white space in the footer section: https://prnt.sc/uep6d4

    In the screenshot below you can see now that there is some “white space.” How do I ensure that the vertical fit, i.e. the homepage is displayed at 100% when the user opens the screen from any device?

    This is the current status
    https://prnt.sc/uep2h8

    This is the desired view (ignore the additional elements or difference in text, it was a different theme)
    https://prnt.sc/uep485

    #1438317
    Tom
    Lead Developer
    Lead Developer

    Strange, what happens if you delete that empty Cover block? Any change?

    #1438842
    Stefan

    Hi Tom,

    Deleted the Element (Cover Block) and the results, (you can also verify on the website: lifestyledemocracy.com) are as follows:

    – Issue found only on homepage:
    Screenshot (from header): https://prnt.sc/ufbwn0
    Screenshot (from footer): https://prnt.sc/ufbx2x

    – Other pages are fine
    – Screenshots (support page header): https://prnt.sc/ufbx6t
    – Screenshots (support page footer): https://prnt.sc/ufbx9n

    It seems there is something going on at the homepage that I don’t understand.

    Hope you can use your guru or jedi knight level skills to help out a WordPress padawan.

    #1439647
    Tom
    Lead Developer
    Lead Developer

    Try adding this CSS:

    .full-width-content .entry-content .alignwide,
    .full-width-content .entry-content .alignfull {
        margin-left: 0;
        width: auto;
        max-width: unset;
    }

    Let me know πŸ™‚

    #1441186
    Stefan

    Hi Tom,

    Thanks for the code. It partially works. If I remove the Element: Header Block, then the width of the site if set to 100% on mobile.

    If I put the Element Block back, then I get the following result: https://prnt.sc/ugf4yq.
    It seems like the Element: header block content is wider than the rest of the containers and this requires that I scroll right to see more.

    I started experiencing these “issue” after installing the GenerateBlocks plugin. I am guessing that the containers and blocks in GenerateBlocks are not optimized in the same way as the default ones for mobile. There is a need to scroll right to access the full content or add additional lines of CSS to adjust the site.

    Looking forward to your feedback.

    #1441627
    Tom
    Lead Developer
    Lead Developer

    That’s because of the Cover Block you’ve added.

    WordPress gave it 100% width, but also gave it padding. That makes it 100% + 16px of padding, which is why it’s wider than 100%.

    Try adding this:

    .wp-block-cover {
        box-sizing: border-box;
    }
    #1441750
    Stefan

    Thanks Tom and GeneratePress Team,
    That solves the issue.

    Regards,
    Stefan

    #1442866
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 16 through 26 (of 26 total)
  • You must be logged in to reply to this topic.