Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

make responsive padding at top of gallery pages - camino


RaeRae

Question

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 post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

12 answers to this question

Recommended Posts

  • 0

@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)

 

Link to post
  • 0

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 post
  • 0
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.

Link to post
  • 0
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;
}

 

Link to post
  • 0
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

Link to post
  • 0

@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.

Link to post
  • 0
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?

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...