Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 10, 2015 at 5:18 am #408612
    fineart

    Hi
    Have a text box with some custom font sizing as per below
    ****************
    <div>
    <h5 style=”text-align: center; font-size: 20px; color: #808080; padding-top: 5px;”>CATCH PHRASE GOES HERE</h5>
    </div>
    <div>
    <h1 style=”text-align: center; color: #af2323; font-size: 65px; font-family: tangerine; padding-top: 5px;”>Your Name</h1>
    </div>
    **************

    The 65px font is the issue

    1. would this code over-ride any mobile friendly (reduction of the font to fit the mobile screen) view and
    2. Is there a way to keep the font large on a desktop but have it fit on one line – as albiet as big as possible – on any given mobile device.

    Thanks In advance
    Chris

    March 10, 2015 at 4:01 pm #408889
    Yigit

    Hey fineart!

    Please change your code to following one

    <div class='first-custom-text'>
<h5>CATCH PHRASE GOES HERE</h5>
</div>
<div class='second-custom-text'>
<h1>Your Name</h1>
</div>

    and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .first-custom-text h5 { text-align: center; font-size: 20px; color: #808080; padding-top: 5px; }
.second-custom-text h1 { text-align: center; color: #af2323; font-size: 65px; font-family: tangerine; padding-top: 5px; }
@media only screen and (max-width: 678px) {
.second-custom-text h1 { font-size: 35px; }}

    Best regards,
    Yigit

    April 8, 2015 at 12:55 am #425017
    fineart

    Thanks Yigit

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Desk top – Mobile Font reduction’ is closed to new replies.