Bedford Banner text too small on mobile?

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

Add to Home > Design > Custom CSS

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

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

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