This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: 

How do I increase the font size for my pages?

  • Creator
    Topic
  • #14483
    coolcooljn
    Participant

    I tried to increase the font size under theme options>styles>typography>primary font and increased it to 20 px. The font sizes throughout my site are still pretty small: http://www.reyoumassage.com. What do I add under options>styles>typography>custom>custom css to make the body fonts bigger?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Author
    Replies
  • #14489
    Jason Bobich
    Keymaster

    Hello,

    When I look at your site, I can see that your body font size is indeed 20px. So, I’m not totally sure the question? Or did you figure it out since posting?

    #14491
    coolcooljn
    Participant

    Maybe, it’s just small on my monitor? What’s a good font size for most pages? Or, any way to have a different font for mobile and desktop? Or is that automatic?

    #14498
    Jason Bobich
    Keymaster

    Maybe, it’s just small on my monitor? What’s a good font size for most pages?

    Are you possibly zoomed out in your web browser or something? 20px is much larger than average. An average body font size range would be 12px-15px.

    Or, any way to have a different font for mobile and desktop? Or is that automatic?

    In responsive design, we use what are called @media queries to style the elements different as we move up (or down) in viewport sizes. Specifically in our themes, what we do is style for the desktop version, and then as the viewport (i.e. screen size or browser window) becomes smaller, we make style adjustments with @media queries targeting these viewport size ranges.

    However, when you come in and make your style changes, you’re now resetting things and setting up this section for the desktop. But now you also need to work your way down and make your CSS customizations for the smaller viewport sizes.

    Here’s an example of how you might structure your CSS changes:

    /* Desktops (i.e. every where) */
    .whatever {
    	...
    }
    .whatever-else {
    	...
    }
    
    /* Tablets -- override anything you did above here */
    @media (max-width: 979px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }
    
    /* Mobile -- override anything you did above here */
    @media (max-width: 767px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.