Problem with only partial visibility of some elements

Design help General
1

I’m having trouble around my footer when I start scaling down from desktop mode. Starting from tablet mode downward, I can’t see all of the footer and the content from the elements above go into the footer and I can’t scroll down. Here’s what I’m doing:

  • I’m putting my footer symbol in a div with fixed absolute positioning at the bottom. It works for other pages, but the CDL Page is the one it’s giving me trouble

  • I tried playing with the margins/padding of the div and the grid above it, but this grid and this page are giving me issues.

  • Everything is fine in desktop mode, but it gives me issues elsewhere. In tablet mode I try to adjust margins and paddings of the grid and footer, but then I can’t scroll down despite overflow for the body, the grid, etc being set to visible. (I even tried setting it to ‘scroll’ and nothing changed). The phone mode adds another problem—now, the grid continues into my footer and I still can’t scroll to the bottom.

  • I also tried setting the footer’s position to Relative and Absolute and Fixed, but nothing changed.

Here is my site Read-Only: ** > https://preview.webflow.com/preview/katya-noble?utm_source=katya-noble&preview=1f6f4b93c8e6261e54285e0c63e9cab3**

Here’s the link to a screenshot of what I see and what page I’m referring to: Dropbox - File Deleted

2

I’d suggest not using grid for this and instead use columns that will stack. Grid is quite complicated and requires you to manually adjust the position of every element on every device. Columns do it mostly automatically and stack on mobile. Your footer will have to grow in height to fit the content on mobile so If you have set a manual height, remove it so it can size based on content.