Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 31, 2013 at 6:26 pm #183061
    5fold

    How can I make sure the text re-sizes in the header area for mobile devices?

    http://www.airqualityspecialistsaz.com/

    • This topic was modified 11 years, 1 month ago by 5fold.
    November 4, 2013 at 10:48 am #184165
    Dude

    Hi glozemedia!

    Do you want to re-size the phone number at the top? If yes use following code

    
@media only screen and (max-width: 767px){
#top .phone-info.with_nav span a{ font-size: 10px !important; }
}

    Phones and mobile devices with small screens (767px width or lower) will change the font size to 10px. You can change the font size and/or max-width value if my code doesn’t give you good results.

    Best regards,
    Peter

    November 4, 2013 at 6:55 pm #184382
    5fold

    I’m referring to the slider area where it says “Breathe Cleaner Air in Your Home”. I’m trying to have it re sized automatically from that large font to a smaller font as it goes from tablet to mobile. I see the theme does it for some h1 tags if the font size is not altered.

    November 5, 2013 at 1:53 am #184568
    Ismael

    Hey!

    Can you please give the text block a unique css selector?

    <span style="color: #000000;">Breathe Cleaner Air&nbsp;in Your Home</span>

    Replace it with:

    <span style="color: #000000;" class="text-breathe">Breathe Cleaner Air&nbsp;in Your Home</span>

    You can now use media query to change text size on different screens:

    @media only screen and (max-width: 767px){
.text-breathe { font-size: 12px; }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
.text-breathe { font-size: 16px; }
}

    Cheers!
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Text Resize on sliders’ is closed to new replies.