Mobile Only Tweak for Banner Font Size using Anya (Bedford Template Family)

Hi,

I'd like some help in modifying the size of the text that is overlaid on banners in the Anya Template (Bedford Template Family).

In my screenshot below, I'd like to make the text "The Day Of" much larger on a mobile device only.

I've searched through similar and relevant questions over the last few weeks and haven't found a solution that works for this template. I understand that you need something like this in order to do it:

     @media only screen and (max-width: 640px) {
    OBJECT ID GOES HERE {
        font-family: adobe-garamond-pro;   
        font-weight: 400;
        font-style: italic;
        letter-spacing: 1px;
        font-size: 18px;
        text-transform: none;
        line-height: 1.5em;
    }
    }

I am currently building a wedding website, so the website is private at the moment. I've temporarily changed the password so that you can look at the website in its current form.

Website: https://www.caseyandliam.com/Password: H3LP!

Thanks in advance for any help.

@L786g42s

OBJECT ID GOES HERE = div#the-day-of .desc-wrapper p strong

This worked, thank you for your help!

I tried removing

div#the-day-of

in an attempt to apply the modifications to all banner text, but it would only work when I repeated the same code below referencing the other banner. Is there a way to reference all banners instead of just the one?

Also, is it possible lower the threshold before the words are forced on to a new line? Could it be something like the padding of the container?

Again, thanks for fixing my immediate concern with a workaround!

@L786g42s .desc-wrapper p strongadd !important to after, eg: font-size: 18px !important

"is it possible lower the threshold before the words are forced on to a new line" I have not really understood the question

Hmm, that doesn't seem to change anything. I took a look at what the

!important

tag does, and I can't see why it would be useful, if it is already making the text the size I want it.

Let me try and explain again, when I change the text size of The Day Before to 65px, the word Before drops down the a new line. However, I still believe there's plenty of space to have all the words on the same line, which is what I'm looking to do.

.desc-wrapper {max-width: 100% !important;}

You wan to change font size of The day before & The day of?

It will be

.desc-wrapper p strong {
   font-size: 10px !important;
}

or which & where banners?

Close, and thanks for trying : ) after some thinking, I think the adjusting the text size is enough to make the banner titles the way I want them. So you've definitely solved my main issue—thanks again!