Jump to content

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

Recommended Posts

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.

alt text

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.

screen-shot-2019-07-20-at-13409-pm.jpg.bdf3106bc985d3025fbe76ba304c0cbc.jpg

Link to comment
  • Replies 7
  • Views 1.1k
  • Created
  • Last Reply

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!

Link to comment

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.

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now 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.