[FloortjeParticipant]

Hey Themeco,

My website is finally live! Whoohoo! http://www.spectralutilities.com!

Though on a few pages (products + sub, systems design, about) I want the landing to be full height for all screens. How do I do that? Should I write a css class for the section? I don’t know how though!

Your help is welcome! 🙂

Floor

[Paul RModerator]

Hi Floor,

Thanks for writing in!

To achieve that kindly do the following.

1. Add my-section id to all your sections that you want to have full height.

Note: You need to enable advanced controls for the style field to appear.

2. Add this in your custom > javascript in the customizer

jQuery(function($){
    var windowH = $(window).height();
    var wrapperH = $('#my-section').height();
    if(windowH > wrapperH) {                            
        $('#my-section').css({'height':($(window).height()-71)+'px'});
    }                                                                               
    $(window).resize(function(){
        var windowH = $(window).height();
        var wrapperH = $('#my-section').height();
        var differenceH = windowH - wrapperH;
        var newH = wrapperH + differenceH;
        var truecontentH = $('#my-section .x-container').height();
        if(windowH > truecontentH) {
            $('#my-section').css('height', (newH-71)+'px');
        }

    })          
});

Hope that helps.

[FloortjeParticipant]

Hey Themeco,

Thanks for helping! Advanced settings: check. Though I have never used javascript so this looks like Chinese 😉

What exactly do I still need to add in the Javascript, besides a custom ID, also numbers? Or can I just copy-paste and use a custom “my-section”?

Thanks!

Floor

[JadeModerator]

Hi Floor,

If the ID you added on the sections is my-section then you can simple copy and past the Javascript code provided previously.

Let us know how it goes.

[FloortjeParticipant]

Hey Themeco!

I think it worked 🙂 Though with this code I just have to make sure the height in Cornerstone is small enough to make it look nice for very wide screens; due to the width, the section expands further down than the actual screen height. But that doesn’t really matter 😉

With most colleagues it looks good now (yay!), except for one, which shows the problem attached. The cards overlap or extend till the next contact section.

Can you advise?

Thanks!

Floor

[ChristopherModerator]

Hi there,

Adding fixed height causes the issue, please remove inline CSS height:355px; to fix this.
Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[FloortjeParticipant]

Hey Themeco,

Well the previous responses were very helpful, and not saying it was outside of your scope?

Where could I find this 355px? What do you mean with inline? What is it related to? It does not seem familiar to me?

Even though it is outside of the scope, it is very essential to me to make this work! You’re support is excellent, I hope it’s not too much of a hassle to help me with this!

Thanks!

[JadeModerator]

Hi Floor,

You might want to consider removing the Gap elements on the top of the two elements so that the images will be pushed upward and not overflowing to the container.

Let us know how it goes.

[FloortjeParticipant]

Hey Themeco,

Thanks. I did that first, and it got worse (because of the w:h ratio on this particular wide screen), whereafter I put the gap underneath the cards. That helped 😉

[NicoModerator]

Glad to hear that it helped.

Feel free to ask us again.

have a great day! 🙂

[Author]

Posts