Jump to content

Bedford Banner text too small on mobile?

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://sodascarf.com/

Hello!

I'm using the bedford template which has a caption on top of the main banner that is based on the SEO description for my site. The text is resizable for desktop and tablet versions via the style editor, but it doesn't seem to work for mobile. I've been doing a lot of looking around online but I can't seem to get it right.

I'd love any help on getting the banner text to be larger on mobile devices only, thank you!!

nb desktop.PNG

nb mobile.PNG

Link to comment

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5eb1a85848591c0bd6c6dea3 .desc-wrapper * {
    font-size: 50px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@tuanphan Okay thank you that worked! Thank you so much!

I did have two more questions, is it possible to target the "Welcome to" to be smaller than the "New Brighton"? The code currently makes them the same size.

And is it possible to make my site title larger on mobile? Thank you a bunch for your help, it is much appreciated! Here's the code I'm using now:

@media screen and (max-width:640px) {
body#collection-5eb1a85848591c0bd6c6dea3 .desc-wrapper * {
    font-size: 60px !important;
    line-height: .9em !important;
}
}

Link to comment
  • Solution
7 hours ago, SodaScarf said:

 

Remove above code & Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5eb1a85848591c0bd6c6dea3 .desc-wrapper p:first-child {
    font-size: 30px !important;
}
body#collection-5eb1a85848591c0bd6c6dea3 .desc-wrapper p:nth-child(2) {
    font-size: 50px !important;
}
h1#siteTitle a {
    font-size: 50px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.