How to make content visible that is hidden beneath headers and footers

Wappler General Need Help
1

Here is my App Structure:

Screen Shot 2020-04-21 at 6.51.13 AM
Screen Shot 2020-04-21 at 6.51.13 AM1050×340 38.4 KB

Header_Home.php is Fixed Top.
Footer_Home_Bottom_Default.php is set to Fixed Bottom.

When you size to a smaller viewport the top of the “about” section is hidden beneath the header as is the bottom of the “About” content hidden beneath the footer. In the footer region, you can’t scroll high enough to make the content visible. I tried sizing the containers but that did not help. How can I fix this so that everything would be visible via scrolling and nothing hidden?

Any suggestions would be appreciated.

2

Hello Bruce,
Add padding top and bottom to your page body.

body {
    padding-top: 50px;
    padding-bottom: 50px;
}

just change the values as you need them.

1 Like
3

Thank you, Teodor!

4

I was all excited about your solution Teodor. Unfortunately, all it does is moved the header down by 50px. Is there another element more suited to add this style too?

5

Can you send a link to your page, where i can check this?

6

Problem solved.

To my “header_home.php” I added a style to “Header” (padding-bottom: 10px;)

To my content "Section About " I added a style ( padding-bottom: 100px;)

Thank you for steering me in the right direction, Teodor.