Responsive footer issues

My site looks about what I want on desktop, but it goes awry with mobile. The content gets scrunched together and the buttons go on top of the footer. The issue seems to be related to the footer, which I have made absolute, bottom: 0 because otherwise a large white space appeared underneath.

I have created a class task-section and have experimented with putting margin-bottom to keep the footer out, but mostly it doesn’t work.

This is a WordPress/Divi site and it’s full of divs and elements I don’t understand–I’m sure that’s part of the problem, too.

Anyway, if anyone can get me sorted on how to get this simple layout to work on mobile, I’d be much obliged!

Hi @CactusWren2020

Have a look at https://css-tricks.com/couple-takes-sticky-footer/ you can find inspiration on how to solve the original issue without using using position: absolute. Because that is what is giving your troubles on mobile :wink:

Cheers
Tom

1 Like

Hey @TomDeS
This is a WordPress site using the Divi theme, not with Html and CSS.
WordPress uses PHP and themes also use PHP.

Hi @codely

WP uses PHP for logic purposes (e.g. show X posts from user Y). This still renders regular HTML though and WP also uses CSS. I see two possibilities here:

  1. Create a (child) theme
  2. Adjust the PHP files containing the footer and so on directly

The latter is the quickest, but also the dirtiest. When updating the theme, chances are the changes will be overwritten too.

Cheers
Tom