Bedford: How to hide page description from website banner?

I want to insert a page description in order for the description to display on search engines, however I don’t want the description to show in the website banner itself. When I enter a page description it also stretches out the website banner. I can ‘hide’ the description by making it transparent, however the banner remains stretched.

No page description entered the width of the banner is exactly how I want it:

However when I insert a page description it stretches out the size of the banner. I can ‘hide’ the description from displaying on the banner by making it transparent, however the banner will remain stretched and not the size I want.

My goal is to hide the page description from the banner while keeping the width of the banner the same as the first screenshot, as if no page description was entered.

Thank you for any assistance.

Try adding this to the custom CSS editor:

.desc-wrapper {
display: none;
}

Thanks for the code Rbit! I tried it and it works but it does not let me then resize the banner to the size I want. I did spend some more time on Google and I came across this code:

.transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper{ padding: 55px 0px;}

It allows me to change the width of the banner by adjusting the padding. The only negative is that I need to insert page descriptions on every page and I 'hide' the description from the banner by making it transparent. It's a slightly messy solution but it's working :)

What you can also do if you want this to only target an individual page, is add it in that page setting > header code injection like so:

<style>

.desc-wrapper {
display: none;
}

</style>

You can also add the description on the Header Code Injection and it won’t affect your banner but it will be used for SEO.

<meta name="description" content="Write it here.">

Hi. I'm using the Hayden template and I just came across this while searching for a solution. I tried this method:

Would it affect my SEO? Pardon me as I have close to zero knowledge on this.

Nov. 18th 2015

For mine it was

#page-description {display:none;}

I added it in the custom css editor

<style>#page-description {display:none;}</style>

or if you want to apply it to an individual page then just add it to the header code injection.

Customer support helped me fix this issue on my website (www.theeducons.com). No coding necessary! Follow these easy steps:

1. Go to "Pages" and navigate to your Home page under the "Main Navigation"
2. Then go to "Design"
3. Go to "Style Editor"
4. Scroll down to "Banner Section"
5. Under "Banner Text Color," select "Transparent" then save changes. It should look like a check mark once you have selected it.

You might have to adjust the size of the banner after you add a description. Google recommends using up to 160 characters. If you need to add more space in your banner, just keep pressing 'enter' under the Description field within the "Configure Page" until the banner gets large enough. It works the same way if you want to shrink the banner size, too.

I hope this helps!

You might consider using a Slideshow Gallery Block for the banner area instead. When you use this method, the image captions within the Gallery Block take over as the banner text, so the page description text won't display in the banner. Squarespace has more about setting this up here:

Slideshow Gallery Block - Bedford special banners

This way the images within the Gallery Block take over as the banner text in place of the Page Description text.

I would suggest getting in touch with Squarespace Customer Care for more information:

Contact Squarespace Customer Care