[inatroyaParticipant]

Here is the problem on video: https://www.screencast.com/t/OEkhZFApkr

Basically on larger screens the space between the header and the content is positioned correctly below the menu bar but on smaller screens the gap gets larger. I’ve looked through the forum and found various references that appear to be fixes but were note. The site is entirely built with no hacks and I want to keep it that way so as it can be easily maintained. Please can your provide a fix in keeping with this strategy.

Also a curation of ‘gap’ fixes would make a great and useful blog post… #

Cheers

Nick

PS: http://soboxer.staging.wpengine.com/ – Xtheme 4.6.4 Cornerstone 1.33 WordPress 4.6.1

[DarshanaModerator]

Hi there,

You can add this under Custom > CSS in the Customizer.

@media(max-width:979px){
  #x-section-1 {
    padding-top: 0 !important;
  }
}

Hope that helps.

[inatroyaParticipant]

Thanks I’ll try it….

Will it also fix this problem in Firefox?

https://www.screencast.com/t/gPm1Mgwn0dhj

[inatroyaParticipant]

Related to your fist answer – I dont know much CSS – is this how I add your suggestion? https://www.screencast.com/t/hh44inDD1

What does the @media do?

Thanks

[Nabeel AModerator]

Hi again,

Yes that’s correct. Just paste the code at the end. The @media rule is used to define different style rules for different media types/devices.

Hope this helps!

[inatroyaParticipant]

Hi again,

Another gap problem? Or is it the same? Or was it introduced by your change?

Take a look at this video showing the problem: https://www.screencast.com/t/KRwlwioy

You can reproduce it by going here: http://soboxer.staging.wpengine.com/inventory-order-management-software-fast-overview/ – note the height of the gap between the first element and the navigation bar. Now note the scroll bar is in the vertical backstop position. Now move the bar up and down and note the gap disappears.

All of my landing pages are compromised by this. I have a very large campaign about to go out and would appreciate a swift fix:

Here is yet another good example of a ‘gap’ problem. In this case controls that are above the fold are suddenly pushed out of sight by the gap: https://www.screencast.com/t/x6FjiV0mv3SZ

[Nabeel AModerator]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto !important;
}
#x-section-1 {
    padding-top: 0 !important;
}

And then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

function stop_jumps() {
	jQuery('header.masthead.masthead-inline').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function(){
	stop_jumps();
});
jQuery(window).resize(function(){
	stop_jumps();
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[inatroyaParticipant]

Hi,

Thanks for your help!

I’ve followed your instructions to the letter, and this has not fixed the problem. Try it and notice how after the home page has finished the animation with the ‘click here’ button being the last element, a fraction of the text is below the fold. Then move the scroll bar up and down slightly and you will see the gap close.

Im running on 1366 x 768. Windows 10 . Mozilla 50.1.0

Here’s the problem again: https://www.screencast.com/t/RnbG4vcH0A

Get back to me ….

Cheers

Nick

[Paul RModerator]

Hi Nick,

Text is part of revslider, try adjusting the spacing in revslider instead of using css.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Author]

Posts