[Resolved] Header background color changed across all pages

[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.

[Elvin]

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.:)

[Stefan]

Hi Elvin,

Advancing past the noob level. 🙂
Thank you for that, I am getting the ropes of this slowly.

Regards,
Stefan

[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

[Tom]

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

[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.

[Tom]

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 🙂

[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.

[Tom]

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

[Stefan]

Thanks Tom and GeneratePress Team,
That solves the issue.

Regards,
Stefan

[Tom]

Glad we could help! 🙂

[Author]

Posts