Skip to main content

Hey there! I check out this post on editing our CSS to adjust the height of the hero banner: 

 

I found the code, but I wasn’t sure where to insert it into the code? We have no other CSS - just the default of what’s there. 

 

When I tried to add it to the code, nothing happened. I tried adjusting the pixels, but I saw no difference.

I’m not comfortable with CSS, so I wasn’t sure how to make this work on staging. Any ideas? 

You add the CSS via the controls. Go to Theme > Custom CSS
 


And add the following:
 

/* hero banner change height */
.custom-hero-banner {
 height: 360px; /* default: 240px */
}

Then adjust the height to what you want it to be (changing ‘360’ to whatever pixel height.

If you’re not comfortable with CSS, I’d proceed with caution or ask for the Support team’s help.

So it’s specifically in the code that I was curious about. When I inputted this code it didn’t make a difference, so I wasn’t sure if it needed to placed in a specific spot. No worries, though, we can talk to our dev team if we need to. I just wanted to see if we could do it on our own first. 

You just need to add it to the custom CSS,

You might have other custom CSS in your stuff -- look for an opening bracket { (which is where the CSS declaration starts) and a closing bracket } (where CSS declaration ends). Put this after a closing bracket.

For sure talk to your dev team if not familiar with code 😀 You can really muck up your site if you get it wrong.

Reply


Terms & ConditionsCookie settings