White Footer on No Header, No Footer page and double-scrollbar on Cornerstone

[fabiofava]

Hey folks!

I’ve made a Comming Soon page for a new site I’m developing, and set it as Home so it loads automatically when the site loads. I’m not sure what/where setting I did wrong or if it’s on the Section, Row, Cemphasized textolumn or somewhere else, I’m having this:

When I’m editing the page in Cornerstone, I see double-scrollbars on the right side, and if I scroll it all up, then I see a slmall white stripe at the bottom of the page. When viewing the page on mobile landscape screen, scrolling down I can see it too.

What should I do to have my (only) section to occupy the full screen without that white “footer”? The page is a No Header, No Footer, so it shouldn’t be showing like that. I kindly ask you to point me a direction to solve that and have it clean on all viewports.

Thank you very much once ore and best regards!

[ruenel]

Hello @fabiofava,

Thanks for writing in!

You can set a minimum height in the Column element.

Assuming that the remaining top and bottom height of the Section is at least 30vh. You can adjust it to a minimum height of calc(100vh - 130px) where in 130 pixels is the total default top and bottom padding of the Section element.

Hope this makes sense.

[fabiofava]

Hey @ruenel

I’m sorry but I didn’t understand:

Assuming that the remaining top and bottom height of the Section is at least 30vh . You can adjust it to a minimum height of calc(100vh - 130px) where in 130 pixels is the total default top and bottom padding of the Section element.

I don’t actually understand very well the vh concept itself. Would you mind explaining in a more simple english? I’d need it to be 100% of the height, full page… I’ve tried using the 70vh setting but didn’t change the double-scrollbar on Cornerstone, and the white line.

My section there has 0 padding as you can see on the screenshot below:

I’ll keep looking forward on that, thank you very much.

[ruenel]

Hey @fabiofava,

The vh is a unit of measurement which means relative to 1% of the height of the viewport*.

W3Schools.com

Assuming that your Section element do not have padding, you can set a minimum height of 100vh in your Column element. If I am not mistaken, this is your current element structure:

Section
   Row 
      Column
          Logo Image
          Headline
          Headline
          Text 
          Countdown

Hope this helps.

[fabiofava]

Hey @ruenel thanks for getting back!

I’ve set 100vh as suggested, but unfortunately nothing changed. I’ve disabled all WordPres and Server Caches, cleared browsers cache, but I still have the white stripe on the bottom. I feel I’ve made some mistaque in somewhere else brother.

On the element structure, you’ve missed the WPML Language Switcher on bottom:

Section
   Row 
      Column
          Logo Image
          Headline
          Headline
          Text 
          Countdown
          WPML Language Switcher

Thank you again for all your patience and support.

I'll keep looking forward on that, thank you so much!

[christian]

Hey @fabiofava,

If your concern is the double-scrollbar, set the Section’s Overflow setting to Hidden. If the double scrollbar persists, set the same in every element that has the Overflow option like the Rows and Columns.

[fabiofava]

Hey @christian thanks for your help!

It solved the white stripe on the bottom of the page, but now when I click on the US flag to show the other languages flags (Brazilian Portuguese, Spanish and French) , it cuts the Spanish flag and doesn’t show the French flag.

I’ve tried 130vh without success. Any suggestion?

Cheers!

[ruenel]

Hey @fabiofava,

If you have created the page in your local WP set up, please save the page as a template and put it in Dropbox. You can give us the link for us to download and double check your layout. If you have a staging site, that would also work. We would love to check it and figure out your issue.

Best Regards.

[fabiofava]

Hey @ruenel thanks for getting back

I’ve set a Staging version so you can jump in and take a look.

I’ve tried adding some padding on the bottom of the section but no better result.

I’ll send you the credentials via secure note.

Thank you very much and best regards

[ruenel]

Hey @fabiofava,

Please also provide the Authentication details.

• See the secure note

Thanks.

[fabiofava]

Hey @ruenel sorry brother I forgot to disable that.

It’s now disabled, normally accessible. Thanks!

[ruenel]

Hey @fabiofava,

Your setup is already correct. The flags inside the dropdown is no longer visible because you have chosen to hide the Overflow of the Section element as pointed out by @Christian in his reply. If you choose the overflow to be visible, you will notice a 32 pixel white space at the bottom of the Section. This is because your have a height of 100vh plus the height if the WordPress Admin bar. You will not see the white space below when you are NOT logged in.

Hope this makes sense.

[fabiofava]

Hey @ruenel thanks for getting back!

I’ve been looking the Staging Site from my phone (not logged-in) and, as you can see on the attached picture, the French Flag doesn’t appear on the Landscape mode.

I hope we can find a way to make that Hero Section to occupy the whole screen on all viewports. I’ll keep looking forward from you folks on that, thank you very much.

P.S. - WPML Support Staff may also be accesing the Staging Server to debug this issue

Best regards

[christian]

Hey @fabiofava,

The solution is the add height to your column from 100vh to something like 110vh. That is to accomodate for the lanuage switch height when it’s hovered on.

[fabiofava]

Hey @christian thanks for your reply!

I’ve found my way to have it working brother. I’ve set it to an horizontal list while the site is under development, then when it goes live I change it to the customized way you folks have provided me. Thank you so much for all insights and learning.

I’m sorry for having taken your precious time.

Please feel free to close and even delete the topic.

[christian]

Glad to hear that @fabiofava