Content is currently hidden behind the footer

[umesh84]

The bottom page content is currently hidden behind the footer in small device

URL: ​https://wordpress.tv/subtitle/?video=72128

[umesh84]

For better understanding I have attached a screenshot

[umesh84]

added patch

[sabernhardt]

last paragraph is covered at 1366 pixels wide

[sabernhardt]

The footer can overlap content on larger screens, too. I do not think the footer should have absolute positioning at any screen size on this page.

[fishsnatcher]

To fix this issue, you can adjust the CSS to ensure that the footer doesn’t overlap with the bottom page content on smaller screens. Here are a few common solutions:

Solution 1: Add Padding to the Bottom

Add padding to the bottom of your page container to ensure there's space above the footer on small devices. This can be done with CSS:

@media (max-width: 768px) {
  .page-content {
    padding-bottom: 100px; /* Adjust the value as needed */
  }
}

Solution 2: Ensure Footer Stays Below Content
If your footer is set to position: fixed or position: absolute, it may overlap content. You can ensure it stays below the content by setting position: relative and adjusting any necessary margin:

footer {
  position: relative;
  margin-top: 20px; /* Add space between content and footer */
}

Solution 3: Use Flexbox for Sticky Footer
If your layout allows it, you can use Flexbox to keep the footer at the bottom of the viewport only when there’s not enough content. Apply this to your main container:

body, html {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.page-content {
  flex: 1; /* This pushes the footer to the bottom */
}

These changes should prevent the footer from overlapping content on small screens. Let me know if you need help with specific CSS selectors or further customization.

[rinkalpagdar]

Resolved footer overlapping issue causing below 600px