Jump to content

Need CSS Help: Large Grid Gap Above Footer-Header

Go to solution Solved by Web_Solutions,

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

Link to comment
5 hours ago, mindofalexander said:

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-46-27 (1).mov 2023-08-17 17-46-27.mov

Can you share your website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
6 hours ago, mindofalexander said:

Hey there! 

I believe the URL currently is this.

"dinosaur-trombone-43wa.squarespace.com"

Thanks!

 

Replace your code with the code below.

/* Hide Site Footer */
footer {
  display: none !important;
}

/* Full Bleed Image Grid */
#gridThumbs {
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  #gridThumbs .grid-item {
    padding-bottom: 45vh !important;
  }
}

/* header to Footer */
header#header {
  position: fixed !important;
  height: 10vh;
  display: flex !important;
  align-items: center !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;
}

 

Screenshot_148.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
15 minutes ago, Web_Solutions said:

 

Replace your code with the code below.

/* Hide Site Footer */
footer {
  display: none !important;
}

/* Full Bleed Image Grid */
#gridThumbs {
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  #gridThumbs .grid-item {
    padding-bottom: 45vh !important;
  }
}

/* header to Footer */
header#header {
  position: fixed !important;
  height: 10vh;
  display: flex !important;
  align-items: center !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;
}

 

Screenshot_148.png

Hey again, 

I just copied the entire code you sent me and pasted it but it didn't seem to work on my end. Not sure what went wrong?

Alex

Link to comment
Just now, mindofalexander said:

Hey again, 

I just copied the entire code you sent me and pasted it but it didn't seem to work on my end. Not sure what went wrong?

Alex

Did you save it and reload the browser? Also can you send a screenshot where did you add the code?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution
25 minutes ago, mindofalexander said:

I did save it and reloaded the browser, I even attempted to paste the code in a different type of web browser.

Here is a screenshot attached.

Firefox_Screenshot_2023-08-21T22-01-32.879Z.png

 

There was a mistake. Please add the below code now.

/* Hide Site Footer */
footer {
  display: none !important;
}

/* Full Bleed Image Grid */
#gridThumbs {
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
@media screen and (min-width: 640px) {
  #gridThumbs .grid-item, #gridThumbs .grid-image {
    padding-bottom: 45vh !important;
  }
}

/* header to Footer */
header#header {
  position: fixed !important;
  height: 10vh;
  display: flex !important;
  align-items: center !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;
}

 

Edited by Web_Solutions

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
15 minutes ago, mindofalexander said:

I am noticing the blocks seem uneven and not together anymore, they don't meet in the middle. Is there a way to fix that?

Is it work now?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
Just now, mindofalexander said:

Hey yes! I will mark that you solved my issue thank you!

Thanks 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

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.