Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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;
}
}

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

Thank you in advance! 

Bailey

Link to post
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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 chang

Posted Images

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 post

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

457675216_ScreenShot2020-08-30at4_22_43PM.png.aeddf74667e164294686794fbec57195.png

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

1587791355_ScreenShot2020-08-30at4_34_53PM.png.70444e3b1c8cecfd0948dbb1481a910c.png

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.

1766526834_ScreenShot2020-08-30at5_45_54PM.png.b2345822d672543b7e462fcc679abaab.png

Save your changes.

Here is some reading on focal points 

https://support.squarespace.com/hc/en-us/articles/205826028-Using-focal-points-to-center-images>.

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...