Dynamic/Responsive Height in Pro

[roman777]

Hello,

I’m trying to design a page whereas the section background fills 100% of the available space on the users screen, but does not scroll.

To get an idea of what I mean, please visit this page: https://agentpronto.com/buyer-or-seller

You’ll notice that the page automatically adjusts to the size of the browser window, with the background adjusting depending on the user’s browser size. There is no scroll.

How would I achieve this “100% height” solution in Pro?

Thanks.

[basanta]

Hi There,

Thanks for writing in!
You can make similar section with 100% height of the screen. The background will be auto adjust to the section.

Please use this custom CSS to make the section 100% height for any screen.

display: table;
min-height: calc(100% - 40px);
height: calc(100% - 40px;

You can remove the -40px if you don’t have any section like header as in the given example.
Use the css to the class of the section or you can use it in customize section.

Hope this helps!

Thanks

[roman777]

Thanks for getting back. Unfortunately it did not work. It squished the section content to between 1/2 and 1/3 horizontally, as shown in the screenshot below.

[paul.r]

Hi,

Can you provide us the exact url of the page where we can see the image you are referring to.

Thanks

[roman777]

http://agentmatch2.wpengine.com/page-2/

[nabeel]

Hi again,

Thank you for providing the URL. You should use the Background Image(s) option for the 100% height background image under Page Settings > Background Image(s) in WordPress page editor instead of setting the background image of a section…

To remove the scrollbar, adjust the height of your elements, and remove the gap elements from the content. This will automatically remove the scrollbar from that page.

Things you can do:

1. Remove the top gap element
2. Reduce the height of the map
3. Use a small button instead of a large one.

Hope this helps!

[roman777]

Hello,

Is there anyway to do it with the section? When I put in the background image like you’ve suggested the image goes behind the section. I then tried changing the section’s background to transparent but it just shows as white, covering the background image.

[rad]

Hi there,

Background image will always behind a section. Would you mind clarifying what you wish to achieve?

I checked and it seems to be okay, the section with a background. Are you trying to make the section fullscreen, so does the background?

Thanks!

[roman777]

Yes, I am trying to make the section background 100% height depending on the users browser window.

[christian]

Hey @roman777,

The background image covers the section out of the box so what you actually will need is to make the section’s height to span 100% of the viewport / screen. To do that, insert height:100vh; to your section’s Inline CSS under the Customize tab.

You can then adjust your background size and background position to suite your needs.

Hope that helps.

[roman777]

@christian_y

height:100vh;

THANK YOU.

[thai]

You’re welcome.

[roman777]

Is there a way to make the section fit 100% but also have the footer fit as well?

[christopher]

Hi there,

In the CSS you can always subtract the height of an element from the VH value of the height. So for example if the Footer height is 150px then you need to add:

height: calc(100vh - 150px);

You will need to play with 150px to find the correct subtraction value for the code above.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.