CSS: Changing banner height in Squarespace

Add a heading (1).png
 

Do you have a Squarespace template that you're dying to change the banner height on?

We've all been there and thanks to the Squarespace forum, there's a solution.

This code may not work on all templates, but give it a try on yours and see if it fixes your banner issues!

If you're wanting to change the banner height on all images on the site, then paste the below CSS code into the DESIGN > CUSTOM CSS pane in your site editor.

.title-desc-wrapper.has-main-image {
    min-height: 100px;
}

If you're wanting to only change one page, place the below code in the Header Code Injection tab on that page or post's settings.

<style>
    .title-desc-wrapper.has-main-image {
    min-height: 100px; }
</style

Fun trick - always name your code with some lovely forward-back slashes. Otherwise you will have the biggest headache trying to figure out what's what!

For all references and tips, please check out the Squarespace Forum here.