Height Issue after moving to WordPress

  • After I integrated my website into WordPress my height styling is not behaving as expected. It did work correctly within HTML, CSS and JS files.

    The URL that I am working on integrating is: https://2017.anderson-adv.com

    I have several divs (#sections) that each should take up 100% of the height of the viewport. To get to the subsection below you should have to click on a button at the bottom of the screen. When #section is set to height:100% it only fills about 20% of the viewport.

    I can solve this issue by changing height:100% to height:100vh but this is causing issues with optimizing for mobile so it’s not a long term solution.

    Any idea why height:100% isn’t working within WordPress but works without an issue when I am using HTML, CSS and JS files?

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

  • Hi Katiels9,

    Hope all is well.

    The link above seems to be broken however WordPress shouldn’t be applying any additional styling by default.

    The only thing I can think of is that either:

    1) The styles/scripts you’ve applied aren’t being pulled in correctly

    2) You’ve installed additional plugins which use the same styling IDs/classes and have overwrote what you previously had

    If you have a working link, I might be able to give you a better idea.

    Many thanks

    Thread Starter katiels9

    (@katiels9)

    Hi Adam,

    Thank you for your response. That link is live again; however, now there are quite a few things that aren’t pulling in. I will be working on resolving those issues tonight but the height issue is still present if you could look into it. Thank you!

    Hey @katiels9,

    Thanks for the above. I’ve taken a quick look over the link now.

    Are you sure that the code is the same? Do you have a link to the working version hosted somewhere?

    The 100vh does seem to do the trick and works quite nicely on mobile from what I can see. You could always use @media queries though if you just wanted to target desktop devices – https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    Just to note your including the stylesheet twice. Once in the header by the look s normal HTML fashion and the other looks to be enqueued in the footer.

    Regarding the mobile optimisation with the site currently being in essence a one pager that slides between divs, it’s worth noting that the initial page load is around 30mb. This means it’s taking 2.7 minutes to load on a good 3G connection (1.5 m/bs).

    All the best

    Thread Starter katiels9

    (@katiels9)

    Hey Adam,

    I don’t have it hosted anywhere at the moment. I will work on getting those hard files hosted and post a link as soon as I can.

    Can you see why those divs are rendering at 20% rather than 100% in the existing code?

    Hey @katiels9,

    No worries, I’d be interested to see it just to have a comparison.

    Looking at what you currently have it seems that there are a few elements which aren’t getting the actual browser height.

    If you apply height:100% to the html, body and #app-container elements it should fix it.

    html,
 body,
 #app-container {
 height:100%;
}

    Hope this helps.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Height Issue after moving to WordPress’ is closed to new replies.

Tags