• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Stylin Issue on Mobile Devices

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Stylin Issue on Mobile Devices

This topic is: not resolved

Tagged: css, mobile devices, style

  • This topic has 2 replies, 2 voices, and was last updated 6 years, 7 months ago by mrlennyman.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • August 15, 2016 at 2:54 pm #191317
    mrlennyman
    Member

    Hi there,

    I wonder if someone can help me with a styling issue I am having with my h3 titles on mobile devices. I changed the font of h3 and increased it's px size. This looks fine on the computer version of the site. but when I look at the screen on mobile device, the text change back to the original font and is massive in size. It seems as though the media device is taking on the size but not the correct font family.
    I am using the Aspire theme and the site I am working on is http://testsite.thegreatmedicine.com

    All help much appreciated.
    John

    http://testsite.thegreatmedicine.com
    August 16, 2016 at 1:56 am #191360
    Sridhar Katakam
    Participant

    When I inspect the h3 headings on your site in mobile devices, the font family is remaining the same as on desktops: 'Wild Pen 1'.

    You might want to reduce the font size for smaller screens by writing the needed media queries in style.css.

    Ex.:

    @media only screen and (max-width: 500px) {
    
        h3 {
            font-size: 40px;
        }
        
    }

    Genesis Tutorials | Follow me on Twitter

    August 16, 2016 at 3:18 am #191366
    mrlennyman
    Member

    Thank you for the reply Sridhar. I see the same when I inspect the code. But when I physically view the site on a mobile device, the font does not change. I am unable to figure out why this is and that is why I am here.

    Are you able to look at the site on a mobile device? Does the font stay or change? I have tried removing the caching plugins and resetting my phones but it still persists. Are there any other bits of code I might be missing?

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble