Jump to content

How to change banner font size for mobile view ONLY on Squarespace 7.0 Five template

Recommended Posts

Hi everyone,

I recently updated my banner background to include a graphic, but it overlaps with the banner text on mobile view. I've tried everything I could find online and nothing has helped resolve this. I've tried moving the focal point so that it only zooms in on the plain part of the background on mobile view but that didn't help. I've tried just about every custom CSS code to either show a plain color instead of this banner image or to be replaced with an alternate image on mobile view. I can't add an image block on top of my banner image to display a different image on mobile only. I'm not sure if the problem is my version of Squarespace or my template-- but I'm out of ideas.

At this point, all I want to do is change the size of the banner font on mobile only in hopes that it won't overlap with the graphic on my banner image anymore. For reference, this is what I'm working with. Any help would be much appreciated!

image.thumb.png.9a94657670cd5a4dd95f5a40f4f47a6c.png

image.png.2b4df6df4d778450fa12003f247ea5c1.png

My editing sidebar also looks like a different version than all the others I've seen in videos, I'm not sure why. But I don't have any mobile options available to me except to disable mobile view. 

image.png.bb8dca8b3cb3086dad91f798f94741c0.pngimage.png.6999b93ea70a5bd65518fdd6596114f9.png

Link to comment

The dashboard has had a minor rearrangement recently, but most of the options are still identical.

16 minutes ago, embeyer said:

I've tried moving the focal point so that it only zooms in on the plain part of the background on mobile view but that didn't help.

In what way didn't this work? It normally isn't a problem to move the focal point so you don't get an overlap.

I'll give you some code to change the font size on mobile, but I'm not sure it'll give you the result you want:

@media only screen and (max-width:640px) {
  #page-title {
    font-size: 8vw;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy

I'm not sure why it doesn't work, but even if I move the focal point to the bottom right corner, it only slightly moves the graphic. Then it also messes up my desktop view too-- which I thought it wasn't supposed to in full view. 

image.png.bf37c24104129b47d3c6dd6f2f437849.png

However, your code worked to reduce the font size at least (so far no code I've used has done anything noticeable). The only issue is that it still overlaps on longer page titles.

image.png.2beb36686c6a6e34ce6b19ccd864b9a5.png

If I change the focal point now, it doesn't overlap with the mobile title, but it changes my desktop view. Is there a way around this? Is there a way to alter the banner text to display on two lines but only for mobile view using code?

image.png.f19f8e33a482028284dc084cb4ea7d4d.png

image.thumb.png.5621d3cedf941bbd98e3177cdf772035.png

Thank you so much, I truly appreciate the help!

 

Edited by embeyer
Link to comment

Create an account or sign in to comment

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

×
×
  • 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.