[LLDParticipant]

Hello,

I am working on this site: http://legendland.hu/wp/

I’d like to make the site’s height until the browser’s edge.
For example here: http://legendland.hu/wp/?s=gggggggggg it’s too short.
I’ve tried to use body min-height= 100% and height= 100% but nothing works.
What should I do?

Thanks,
Loriana

[John EzraMember]

Hi Loriana,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-main.full {
    min-height: 740px;
}

Note: you may have to adjust the height value to your liking.

Hope this helps – thanks!

[LLDParticipant]

Thank you very much! This is working, but I’d like to ask if there is a way to set the height to be flexible? (Make site height as long as the browser)

[ThaiModerator]

Hi There,

Please try the following CSS instead:

.x-main.full {
    height: 100vh;
}

Let us know how it goes!

[LLDParticipant]

Thanks, I have tried this method. Now it is too long, does not seem to be flexible. 🙁

[Paul RModerator]

Hi Loriana,

You can try this code instead

Please add it under Custom > Javascript in the Customizer.

jQuery(function($) {
    var $window = $( window ).height();
    var $navbar = $('.x-navbar').height();
     var $footer = $('.x-colophon.bottom').height();
    var $headerlandmark  = $('.x-header-landmark').height();

   $('.x-container.max.width.offset').height($window-$navbar-$footer-$headerlandmark-113px);
});

Hope that helps.

[LLDParticipant]

Thank you for not giving up my request. Much appreciated 🙂
Sadly, nothing happens with the JS.

[Nabeel AModerator]

Hi again,

Please replace the previous code with this one:

jQuery(function($) {
    var $window = $( window ).height();
    var $navbar = $('.x-navbar').height();
     var $footer = $('.x-colophon.bottom').height();
    var $headerlandmark  = $('.x-header-landmark').height();
   $('.x-container.max.width.offset').height($window+$navbar+$footer+$headerlandmark+(113));
});

Let us know how this goes!

[LLDParticipant]

Now it became too long as you can see if you search something “cldjslfjdl” for no result.

[Nabeel AModerator]

Hi Loriana,

You can then try for the Sticky Footer instead of the above code. You can find third party plugins for sticky footer e.g https://wordpress.org/plugins/simple-sticky-footer/

Hope this helps!

[LLDParticipant]

Thank you. The one you suggested is not working. I searched for other sticky footer plugins, but nothing solves the problem. It seems like this is a common WordPress problem since years.

[LLDParticipant]

Maybe something with the CSS would help, just do not know what should I change here instead of the classes:
http://stackoverflow.com/questions/12361029/how-can-i-get-a-sticky-footer-on-my-wordpress-theme

[Paul RModerator]

Hi Loriana,

Sorry there should be no px in the code.

Kindly try this again.

jQuery(function($) {
    var $window = $( window ).height();
    var $navbar = $('.x-navbar').height();
     var $footer = $('.x-colophon.bottom').height();
    var $headerlandmark  = $('.x-header-landmark').height();
   
   $('.x-container.max.width.offset').css('min-height', $window-$navbar-$footer-$headerlandmark-118 );
});

Hope that helps.

[LLDParticipant]

Oh, finally this code is working 🙂 Thank you very much.
Just a little bit more customization to be perfect. Now it looks fine when I open with the Customizer and a little bit too long when I open alone.

[JadeModerator]

Hi Loriana,

Can you please point me to the page where that you are trying to customize because I can’t seem to find it.

Also, do you mean you want to make the area where there is text aligned to the left narrow so it will go closer to the centered texts?

[Author]

Posts