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

Bedford Banner text too small on mobile?

Question

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

Share this post


Link to post

3 answers to this question

Recommended Posts

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

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

Share this post


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