Ascension (Primer): customising Hero Widget text

  • Resolved dancol1974

    (@dancol1974)


    5 years, 10 months ago

    The text ‘Awesome.Tech’ in the hero widget doesn’t display properly on a mobile screen – it shows ‘Awesome.tec’ with ‘h’ on the next row…
    Note that the text is in the hero widget’s text field, it is not the hero widget’s title.
    How can I control this text to stop the mobile screen wrap-around ? Should I reduce the hero widget text font size using CSS code ? If so, please advise CSS code.

    Thanks
    Dan

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Try the following in Appearance->Customize->Additional CSS

    @media only screen and (max-width: 42em) {
  .hero .widget.widget_text p {
    font-size: 1.8em;
  }
    Thread Starter dancol1974

    (@dancol1974)

    Hi Jarret,

    once I added another } it worked perfectly !

    Thanks so much, I owe you a beer.

    How do I learn how this – is there anything you recommend ?

    Many thanks
    Dan

    Ah sorry for missing that }!

    In terms of how to learn all this……I took a few web design classes in high school and then just been dealing with websites ever since. I’m a hands on person, so I just fired up a local install on my PC and then played around with the CSS and what not, breaking things and learning how to fix them.

    Also, Google is a big help as well! https://css-tricks.com/ is a pretty good resource as well

    W3schools.com has an excellent CSS “course” and is a great reference for when you’re playing around.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Ascension (Primer): customising Hero Widget text’ is closed to new replies.

Tags