Responsive Header and Footer Not Working On Some Pages

  • Resolved nrosskothen

    (@nrosskothen)


    4 years, 10 months ago

    Hoping that someone smarter than me can help as the randomness of my issue has me at a loss.

    I noticed today that on several pages the header and the footer are not sizing correctly on only a few pages. The width is too small, with small text, etc. On these pages, the responsive menu and its text is also too small.

    I am at a total loss at determining what the issue could be as only a few pages have a problem versus all the pages and I cannot even figure out where to look for the issue.

    All the pages use the Twenty Fourteen theme, same responsive.css, etc.

    One page has a video and I am using WP YouTube Lyte, but other problem pages do not have videos.

    One page has a slider and I am using LayerSlider WP, but other problem pages do not have sliders.

    I am using Autoptimize, but if this was the issue it would be on all pages.

    I don’t know when this started but everything was fine last week.

    Since last week I have installed Font Awesome to update to version 5, but if this was the issue it would be on all pages.

    I also installed Redirection for a few 301 redirects, but don’t see how this could be causing the issue on these pages.

    I just downloaded the latest version of Twenty Fourteen and noticed that this version doesn’t have a responsive.css and I do, but again, everything was also fine last week.

    Hopefully, someone has an idea of what it could be so I know where to look?

    Thank you.

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

Viewing 4 replies - 1 through 4 (of 4 total)

  • From a quick inspection via browser web dev tool, I’ve found that

    • In HTML <head> use this <meta name="viewport" content="width=device-width, initial-scale=1"> instead (the one in the site right now doesn’t have initial-scale=1), this will fix the tiny text problem in small screen. Note that I only see the tiny text problem in Chrome, but not in Firefox, so there might be browser consistency side of thing there.
    • Remove display: table; from .wrapper fixed layout issue in small screen.
    • Add overflow: hidden; to #secondary fixed layout issue in desktop sceenn.

    There is this iframe recaptcha thing in the sidebar that has width attribute with fixed number in it and it’s wider than the #secondary, adding overflow: hidden; fixed the issue.

    Warning: it should go without saying that before making changes to live site, please make sure to have backup available so that we can revert the changes when something else unexpectedly goes wrong.

    Thread Starter nrosskothen

    (@nrosskothen)

    Thank you paulwpxp!

    The issue seems to be resolved. I’m going to go through all the pages later today just to be sure.

    After backing up I made the first change, adding initial-scale=1 to the meta name=”viewport” in header.php, and the text became huge.

    After the second change in style.css, removing display: table; the issue is resolved!

    On your third suggestion – “Add overflow: hidden; to #secondary fixed layout issue in desktop screen”, do you mean to the #secondary in style.css which looks like this?:

    #secondary{
    width:25%;
    float:left;
    box-sizing:border-box;
    padding-left:15px;
    -webkit-box-shadow: inset 1px 0px 0px 0px rgba(15,117,191,1);
    -moz-box-shadow: inset 1px 0px 0px 0px rgba(15,117,191,1);
    box-shadow: inset 1px 0px 0px 0px rgba(15,117,191,1);

    The recaptcha is Contact Form 7 Captcha.

    I still do not get why items #1 and #2 only caused issues on a couple of pages versus all pages, but I’m not a coder.

    Thank you for all your help paulwpxp! You are awesome and I really appreciate your support.

    Yes, that #secondary one.

    Honestly, a lot of time I don’t fully understand how CSS works either, I just try inspecting the elements and try changing some properties ??

    Thread Starter nrosskothen

    (@nrosskothen)

    Thank you again Paul for your time and your knowledge.

    You really helped me out.

    Norman

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Responsive Header and Footer Not Working On Some Pages’ is closed to new replies.