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!
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
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:
Create a (child) theme
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.
