Jump to content

Banner and Font Sizing/Resizing

Recommended Posts

Site URL: https://viola-lion-ynnj.squarespace.com/our-story

I'm hoping someone can help me with this! 

I'm using a 7.0 version of the Brine template. The banner images will not resize from desktop to mobile view and the font size looks great on the desktop view and giant in the mobile view. I have tried a few CSS codes from @tuanphan  (listed below) I have found on other posts and none of them worked. I am sure it's user error on my part. My site is supposed to go live on September 1st. Please help!! What am I doing wrong?

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 100% !important;
    height: auto !important;

  @media screen and (max-width:767px) {
  section.has-background {
    min-height: 40vh !important;

Thank you in advance! 


Link to comment
  • Replies 6
  • Views 951
  • Created
  • Last Reply

That was as an image block, but here is what it looks like as a banner, also the text looks so big in mobile view. Should I just take the text size down a bit until it looks good in both desktop and mobile view? I thought it would resize on the mobile automatically. 

Desktop Screencap.png

Mobile Screencap.png

Link to comment

Lets see what we can do about the banner image. You probably need to change the focal point for image.


Click and drag the focal point to the upper left of the image.


Save the changes.

Be sure you've selected the Our Story Page from Home > Pages.

Go to Home > Design > Site Styles.

Click on the banner image on the page.

The style tweaks list should have narrowed down to just a few options. One being Intro Padding (With Background Image).

Hover over Intro Padding (With Background Image) and use the slider to expose the full height of the image.


Save your changes.

Here is some reading on focal points 


There is a downside to these settings if you turn on Parallax again or add a banner image like you did for Our Story to another page. Unless the image is the same dimensions you will get odd results for the new banner.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.