Jump to content

make responsive padding at top of gallery pages - camino

Recommended Posts

Hi there!

Website and one of affected pages is: https://www.somethingcoolcreative.com/promo-photos

I made my header sticky, so I needed to add padding to the page in order to push the top images down so they weren't being partly covered up by the header. However, I am not sure how to make the padding responsive. Pixels are not responsive, and I tried vh and using a % but in all cases, the padding above the first images changes in relation to the header, so sometimes it is just a few pixels and sometimes it is like 3x as thick as the rest of the white padding around each image.

Here are a couple things I have going on on a couple of different pages:

 

/*padding at top of aerials gallery*/

body#collection-5de70d2f89bdad6667541ccb .content-outer-wrapper {
    padding-top: 139px;
}


/*padding at top of press promos gallery*/

body#collection-5de3343ac573c502d7e83406 .content-outer-wrapper {
    padding-top: 20vh;
}

 

Link to comment
  • Replies 12
  • Created
  • Last Reply

@RaeRae Use this code to make header sticky, and you don't need to care with the above problem.

header#siteHeader {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

(add to Home > Design > Custom CSS)

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

unfortunately that code does not work for making the header sticky as it still slides up about halfway when scrolling.

Here's all the code I am using to get the header to be sticky and full width. If any elements are missing it doesn't behave quite how I want it to:

/*make header sticky*/

#siteHeader {
  opacity: 1 !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  transform: none !important;
  -webkit-transition: all 650ms 0ms ease, opacity 300ms 50ms ease;
  -moz-transition: all 650ms 0ms ease, opacity 300ms 50ms ease;
  -ms-transition: all 650ms 0ms ease, opacity 300ms 50ms ease;
  -o-transition: all 650ms 0ms ease, opacity 300ms 50ms ease;
  transition: all 650ms 0ms ease, opacity 300ms 50ms ease;
}

.site-header.show {  
  background: #00758F;  
  margin: 0px;  
  padding: 0px 20px 0px 0px;} 


/*this code to make sticky header full width*/
.hide-header {
    opacity: 1 !important;
    background: #00758F;
  
  padding-top: 10px
    margin: 0;
    padding-left: 50px;
    padding-right: 50px;
}
 

Link to comment
1 minute ago, RaeRae said:


}
 

Try again with

header#siteHeader {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

If it still doesn't work, please keep the code and I will check.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
1 minute ago, RaeRae said:

it still doesnt work. I left it up so you can see what it does.

OKay. Remove the code I sent and use this

header#siteHeader {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transform: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
6 minutes ago, RaeRae said:

@tuanphan  okay, so this is working great on the gallery pages now, but on the other pages there is a large white space between the header and the body. Any ideas?

https://www.somethingcoolcreative.com/photography-services

I see it had top padding 121px. Did you create it or 😎

It seems that many pages have a 121px top padding. Try checking SS settings
If you can't find it, I'll send the code to solved

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
2 minutes ago, RaeRae said:

@tuanphan I just searched through my custom CSS and did not see 121 anywhere! I also got rid of all extraneous code from previous solutions. Then I checked in the site styles but did not see any padding set to 121, or really any padding adjustable on the top of the body or bottom of header.

Which template do you use?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.