• 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

Infinity Pro – Mobile Front Page – Font Style

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 › Infinity Pro – Mobile Front Page – Font Style

This topic is: not resolved

Tagged: css, font, font CSS, front page, front page CSS, Infinity Pro, infinity pro CSS, widget, Widget CSS

  • This topic has 1 reply, 2 voices, and was last updated 5 years ago by Derek.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • January 25, 2018 at 5:01 pm #215741
    [email protected]
    Member

    When I go on the mobile version of my site, the front page's widget 1 title is white and too large. How can I convert this to black and resize accordingly? I'd like it to match the desktop version.

    Similarly, the rest of the fonts in the front page are too large and do not reflect the desktop's style.

    Tried looking around for the code(s), but am having trouble finding it. Please and thank you.

    http://www.pg-commercial.com
    January 26, 2018 at 5:28 pm #215773
    Derek
    Member

    It looks like you've gotten the color set back to black. If you'd like to change the size of the title on mobile devices, look in your style-front.css file for the "max-width: 600px" media query section, containing the following line:

    @media only screen and (max-width: 600px) {
    
    	.front-page-1 .widget-title {
    		font-size: 40px;
    		font-size: 4rem;
    		margin-bottom: 20px;
    	}
    
    }

    Change the font-size to 30px and 3rem (or whatever size you want). The other titles on the page can be changed by adding the following CSS within the "max-width: 600px" media query that the above change was made:

    .front-page-2 .widget-title,
    .front-page-3 .widget-title,
    .front-page-4 .widget-title,
    .front-page-5 .widget-title,
    .front-page-6 .widget-title,
    .front-page-7 .widget-title {
    	font-family: 'Proxima Nova', sans-serif;
    	font-size: 30px;
    	font-size: 4rem;
    	font-weight: 300;
    	letter-spacing: 50;
    	text-transform: none;
    }

    Again, update the font-sizes to something more suitable to your needs.


    5.12 Design Lab
    WordPress Websites built on the Genesis Framework
    512designlab.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 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