Make your hero banner and text look good on any device
You’re using a gorgeous background image for your banner, and you have the perfect catchy headline to go on top of it.
You create your page, add both elements and then… the fight begins.
You start by using spacers, trying to find the perfect placement for your lovely headline on top of the image, in a way that looks 100% readable at all times.
It seems like you finally nailed it on desktop!! But a shiver runs through your spine as you think about checking the mobile previews because you know for a fact, it’s going to suck.
Sounds familiar? (sans shiver, perhaps)
It may feel like you have no control over this disposition, but what if I told you you do?
Today, I want to share with you a couple of quick fixes you can use to make sure your banner or hero area looks great on both desktop and mobile at all times.
Option #1: Sticking to the native options
As much as I love coding not everything requires a solution involving external code right off the bat, so before you put on your CSS cap (gloves?) on, you can try using Squarespace’s native features.
The first thing you can do is to play around with the focus dot on your banner image.
It may seem like a silly suggestion but I’ve been able to avoid writing a few lines of code just by taking a few minutes trying to reposition it so the image crops better on mobile.
The second thing you can do is to use more spacers.
I say “more” because, assuming you’re trying to set your text to the left or right side of your image you’re probably using only one spacer on the opposite side to push your text in place.
However, by adding one or more spacers on top or below your entire content you’ll create a taller banner, making the background image increase in size as well and, hopefully, allowing you to have more room to play with the focus dot.
If right now you’re thinking: “B, I already tried that and it didn’t work, that’s why I need help!“
Ok ok, I hear ya! Let’s move onto the next option…
Option #2: Setting the width of your banner text, without spacers
Yes, spacers come in very handy, but no so much when you’re trying to make things look great on desktop and then on smaller screen sizes you end up with a text sausage…
“Uhm… a what?“
Text sausage: a super squished up text column that looks ridiculous on tablets.
Example:
So, in order to avoid this squished-up text column while still keeping your text on one side of your banner on desktop, what you can do is set up a maximum width for the content that matches the space you want it to occupy.
Briefly, what we want to do is target the content area of the banner and set the max-width property to a fixed number.
In this example, I’m working with an index page inside the Brine template, so I’ll be targeting the URL slug of my section to make sure no other banner on the site gets this modification, and then I’ll look for the best container to target based on what I see through Inspect Element.
Note: keep in mind you’ll need to target YOUR specific index section or page ID in the code, in order to make this alteration only to ONE banner of your site.
Once I take out the spacer I had before…
…I can take a look at one of the bigger containers holding the content inside my index section:
As you can see, this one (called .Index-page-content) occupies almost the entire space (blue + green) of my banner.
I could use it, but I know I’ll have to fight the existing padding to make it look nice.
I rather look inside to see what the next container is holding.
Ok, so the next container seems to be a better fit for this customization as there is no existing padding involved and it holds the content I want to modify.
It has a bunch of classes but I’ll keep the first one, .sqs-layout.
Now, I can head into my Custom CSS window and set up my selector:
#hero .Index-page-content .sqs-layout { }
I’ll highlight the container in red so it’s easier to see where it ends now and where it will end in a second:
Now, I’m going to give that container a max-width of 800px.
#hero .Index-page-content .sqs-layout { max-width: 800px; }
As you can see, now my content shrunk down and it extends only up to those 800px!
Note: in this example there’s NO Content Inset set through the Style Editor. If your site has it, you’ll notice your content won’t reach the edges of the box. If you want to get rid of it ONLY for that banner content, you’ll need to include the following snippet in your code:
#your-url-slug-or-page-id .Index-page-content .sqs-layout .sqs-block { width: 100%; }
Then, if I preview on tablet or mobile, the content expands all the way because my tablet mockup is around 800px wide and the phone one is smaller!
Option #3: Adding a background color to the text over a banner image
Another solution you can use to make sure your text is readable over your banner image on any device, is to simply add a background color to the text or content.
As you probably noticed on the previous option, I highlighted the content area in a bright red color.
So, starting from there, what you can do is once again target your content area (mine will still be my url slug and .Index-page-content .sqs-layout) and give it a background color that matches your site.
Note: you can make it slightly transparent as well! Simply use an rgba color code instead of rgb or hex.
You can use this background along with the max-width solution from before if you want to, just like I’m doing here:
#hero .Index-page-content .sqs-layout { background: rgba(255, 255, 255, 0.5); max-width: 800px; }
Then, to make things look nicer, we can add a padding all around to make sure there’s some space between the text and the edge of the background.
#hero .Index-page-content .sqs-layout { background: rgba(255, 255, 255, 0.5); max-width: 800px; padding: 40px; }
Now, what if you like this idea but only want to implement the background on smaller screens since that’s when you start having issues with readability?
Then it’s time to use our super handy media queries!
In this case, I want to make the background display from tablets and all the way down to phone screens, while keeping the max width to 800px at all times.
So, I’ll first split my code into two:
#hero .Index-page-content .sqs-layout { max-width: 800px; } #hero .Index-page-content .sqs-layout { background: rgba(255, 255, 255, 0.5); padding: 40px; }
And then wrap a media query with a condition of a max-width of 960px around the snippet with the background and padding declarations.
#hero .Index-page-content .sqs-layout { max-width: 800px; } @media screen and (max-width: 960px) { #hero .Index-page-content .sqs-layout { background: rgba(255, 255, 255, 0.5); padding: 40px; } }
So now, I’ll have my text reach a max width of 800px at all times and I won’t see the background on desktop…
…but I will on smaller screens!
Bonus! Changing the size of your text on small screens
If the issue you’re having with your text not looking good over your banners on smaller screens isn’t necessarily related to position but letter size, then another thing you can do is to use a bit of code to change the font size of your text only on mobile!
And there you have it!
3 simple ways (plus an extra tip!) to make the text over your banner look great and be readable on any device, in Squarespace!
Until next time,
B.
