- This topic has 16 replies, 2 voices, and was last updated 7 years, 7 months ago by Andrew Misplon.
Tagged: Spacing
- AuthorPosts
- May 11, 2017 at 4:51 pm #6631
jennyjenwebParticipantI followed your advice to the user: provwp about how to remove spacing above the footer. It worked like a charm; I am delighted. However, I still have a problem with a gap between the main menu and the content in Edge & IE, regardless of the template. The layout is fine in Chrome, Firefox and Opera.
In Edge, the gap generally appears when I open a page, but disappears again when I refresh the page.
Any ideas?
Thanks.
JennyMay 11, 2017 at 4:53 pm #6632
Andrew MisplonKeymasterHi Jenny
Glad to hear you’re making progress. How did you remove the spacing? With Page Settings?
May 11, 2017 at 5:07 pm #6633
jennyjenwebParticipantHi, Andrew and thanks for the fast reply. Yes, that’s what I did. And as I said, it worked on the footer (in all browsers, including Edge) but not on the header, which by the way was never a problem in the other browsers.
May 11, 2017 at 5:11 pm #6634
Andrew MisplonKeymasterThanks for the feedback. Please, send your URL and I’ll take a look. Private Reply checkbox below the comment field.
May 11, 2017 at 5:14 pm #6635
jennyjenwebParticipantThis reply has been marked as private.May 11, 2017 at 5:17 pm #6636
Andrew MisplonKeymasterThanks. Please, start by clearing your cache in the caching plugin being used. Any change? If not, clear the cache again and deactivate the caching plugin, any change then?
May 11, 2017 at 5:45 pm #6637
jennyjenwebParticipantHi, Andrew. Tried clearing all caches and deactivating the caching plugin but with no success. On my first “walk” through the menu, it all looks good, which is an improvement. But once I return to any page, the gap reappears. When I refresh a page, it disappears again, same as before.
May 11, 2017 at 5:53 pm #6638
Andrew MisplonKeymasterSo to confirm, you’ve cleared Autoptimize and also cleared and deactivated it and then refreshed the browser a few times and the issue persists?
Which page are you testing?
May 11, 2017 at 5:55 pm #6639
Andrew MisplonKeymasterI can’t test on Edge but ideally you need to open developer tools when the margin is there and open the inspector and click on the header and see what rule the margin is originating from.
https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide
May 11, 2017 at 6:12 pm #6640
jennyjenwebParticipantIt comes from class = “wrapper-sticky”. When I open a page, the height is 224px (which is too much), and when I refresh, the height changes to 112px.
May 11, 2017 at 6:19 pm #6641
Andrew MisplonKeymasterThanks. Try adding this to
Appearance > Customize > Additional CSS
or your own Custom CSS plugin:/* Header */ .wrapper-sticky[style] { height: 112px !important; }
May 11, 2017 at 6:34 pm #6642
jennyjenwebParticipantThanks, I’ll try it. But I’d feel more comfortable if I could apply that rule to Edge only. Do you know how I can do that? I am fairly certain it’s possible.
May 11, 2017 at 6:52 pm #6643
Andrew MisplonKeymasterAre you viewing your site on a relatively low resolution display/laptop? Does the menu not have enough space on load, is in two lines and then has enough space after load? That is my guess as to what’s happening. The sticky header grabs the height of the element while it’s loading and is doubled up.
May 11, 2017 at 6:54 pm #6644
Andrew MisplonKeymasterYou can try this:
@supports (-ms-ime-align:auto) { /* Header */ .wrapper-sticky[style] { height: 112px !important; } }
It shouldn’t matter applying the first rule to everything, 112 is the height.
May 11, 2017 at 7:36 pm #6645
jennyjenwebParticipantHi, Andrew. I’ve been looking at the site on a large laptop and an even bigger monitor, so the menu has plenty of space. I’ll try adding the code to my child theme css. Thanks for giving me the ms specific version too.
- AuthorPosts
You must be logged in to reply to this topic.