Jump to content

In Need of CSS Help: How to Stretch Portfolio Grid to Fill Remaining Screen Space Above Fixed Footer on Squarespace

Go to solution Solved by mindofalexander,

Recommended Posts

 

Hello everyone,

I'm working on a Squarespace site and have encountered a styling issue that I hope someone can assist me with.


Problem Summary:

I have a 4-panel portfolio grid that should sit directly above my site's header. The catch is that I've moved the header to where the footer traditionally is and fixed its position there. Everything almost fits perfectly except for a pesky grey space that appears between the portfolio grid and the now footer-positioned header. This space varies depending on the screen size, and I'm struggling to make the portfolio grid dynamically resize to close this gap regardless of the viewport.


What I've Done So Far:

1. Moved the header to the bottom of the viewport and fixed its position.

2. Have a 4-panel portfolio grid sitting above this header.

3. Tried various CSS methods to close the gap, including adjusting padding and margins.


What I Need:

I need the portfolio grid to be responsive and always stretch to fill any space between it and the footer-positioned header, ensuring there's no grey space on any screen size.


Here's a snippet of my current CSS for clarity:

/* Hide Site Footer */

footer {

    display: none !important;

}

 

/* Full Bleed Image Grid */

#gridThumbs {

    width: 100vw;

    margin: 0;

    padding: 0;

    overflow: hidden;

}

 

/* header to Footer */

header#header {

    position: fixed !important;

    bottom: 0 !important;

    left: 0;

    z-index: 9999;

    width: 100%;

    top: unset !important;

    background-color: white !important;

}

article section:first-child {

    padding-top: 0 !important;

}



If anyone has experience with this kind of issue, especially on Squarespace, I'd deeply appreciate your insights or solutions.

Below I have attached two videos and an image to share my dilemma.

Thank you so much!

 

Thumbs.PNG

2023-08-17 17-44-32.mov2023-08-17 17-46-27.mov

Edited by mindofalexander
Link to comment
  • mindofalexander changed the title to In Need of CSS Help: How to Stretch Portfolio Grid to Fill Remaining Screen Space Above Fixed Footer on Squarespace
  • Replies 5
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.