Jump to content

Bedford Banner text too small on mobile?

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
  • Replies 3
  • Views 617
  • Created
  • Last Reply

@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
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

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.