Skip to main content
J
Julesssss
Contributor ⭐️
October 21, 2022
Question

Where in the code do you input the code to change the height of a Hero Banner?

  • October 21, 2022
  • 3 replies
  • 79 views

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? 

3 replies

A
Anonymous
October 21, 2022

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.

    J
    JulesssssAuthor
    Contributor ⭐️
    October 21, 2022

    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. 

    A
    Anonymous
    October 21, 2022

    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.

    Terms & ConditionsAccessibility statement