Header and Footer NOT full width

Hi there,

For reference, can you share the link to your site?

My site is still under construction so I don’t know if you’ll be able to see it, but here’s the link: Home – Intuitive Traveler

I’ve also seen this issue on the Travel Blog, Destinations, Learning Languages, and Traveler’s Life pages.

If the link shows a “coming soon” page, please refer to the photos in the original post.

It would be hard to assess the site without seeing it live. Would you be able to temporarily disable the “Maintenance Mode”?

Hey Fernando Azarcon,

I have launched my blog and would like your help with cover images on the Home Page, the Travel Blog, and the Destinations, Learning Languages, and Traveler’s Life pages. The cover image is too large for the page and I can scroll to the right and see extra white space.

I am using GeneratePress free. In the customizer>layout tab, my Header and Footer widths are set to “full”.

There is white space between the Header/Footer and the right scroll bar. This is only a problem on pages with cover images at the top.

https://intuitivetraveler.com/

• This reply was modified 1 year, 2 months ago by intuitiveetraveler.
• This reply was modified 1 year, 2 months ago by intuitiveetraveler.

Would you be able to temporarily disable the “Maintenance Mode” so we can see that issue live and assess what to do?

This link should work: Home – Intuitive Traveler

On what device and browser are you experiencing these issues? From the site you linked, I’m not experiencing any of the said issues from my end.

PC laptop with Microsoft Edge.

Could you try using Chrome browser to test?

Hey Fernando, in Chrome I’m getting the same issue. I scroll to the right and there is a white space between the header and the horizontal scroll bar. The issue is with both the header and the footer. This occurs for all pages that use a cover block at the top.

Plus, in the footer, the youtube button is hanging lower than the other social media buttons. How can I change the alignment so that every social media button is the same height?

I tested your site on Chrome, Firefox and Safari, on none of them I can see the non-fullwidth issue. Have you tried it on other devices?

For the social icon issue, add this CSS:

.widget ul.wp-block-social-links >li {
    margin-bottom: 0;
}

I will test the site on other devices now. As for the social icon issue, the CSS does not fix the problem. Thank you though.

Ying’s CSS should work for the Social Icons. How did you add the CSS?

Originally, I didn’t add CSS I went to the widgets tab in wordpress and used the social icons block. I tried to use a short code block to add the CSS but it shows up on the website as code rather than social icons.