WordPress.org

Ready to get started?Download WordPress

Forums

Pinboard
[resolved] Font Size Adjustments on Mobile Phone Screen (15 posts)

  1. akinom77
    Member
    Posted 1 year ago #

    Hello,

    I have customized my fonts and want to now make them smaller when the site is displayed on a smaller screen like mobile phones. I don't seem to find the place to adjust that. Is it in the css somewhere or the php files?

    Thanks!
    Monika

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you have a section in the dashboard named, "Custom CSS", "Custom Styles", or "Jetpack", or are you using a Child Theme?

  3. akinom77
    Member
    Posted 1 year ago #

    I am using a child theme.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you used Media Queries before?

  5. akinom77
    Member
    Posted 1 year ago #

    Unfortunately no. I am quite new to this.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can use Media Queries to specify a browser/device width that your CSS styles apply.

    In your Child Theme style.css file, make a new style and wrap it in this;

    @media only screen and (max-device-width: 480px) {
    
    }

    E.g

    @media only screen and (max-device-width: 480px) {
     p {
      font-size: 10000px;
     }
    }

    Further reference: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

  7. akinom77
    Member
    Posted 1 year ago #

    Thanks! I just tried but it's not picking it up. Is something possibly overriding it in the functions.php? I saw some references to it there.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you post here the CSS code that doesn't work?

  9. akinom77
    Member
    Posted 1 year ago #

    I have tried these two:

    @media all and (max-width: 480px) {
    .entry-title {
    font-size: 36px;
    }
    }

    @media only screen and (max-device-width: 480px) {
    .entry-title {
    font-size: 36px;
    }
    }

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    May you provide a link to the webpage where this is not working?

  11. akinom77
    Member
    Posted 1 year ago #

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Use h2.entry-title

  13. akinom77
    Member
    Posted 1 year ago #

    Thank you!!! Worked beautifully. So this way I can adjust pretty uch most of the styles, right? So helpful.

    Btw, not sure if it's your area but I also had another question. Would you know how to do this one?

    http://wordpress.org/support/topic/custom-category-links-1?replies=3

    If you see on my site, clicking on the category icons or the meta category links, it goes to category page but I would like for it to go to my custom page, per the navigation menu.

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Thank you!!! Worked beautifully. So this way I can adjust pretty uch most of the styles, right? So helpful.

    Yes.

    I don't know about your other topic, sorry.

  15. akinom77
    Member
    Posted 1 year ago #

    Ok. Thanks for the help on this one.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic