StudioPress

Forum navigation

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

Front Page header proportions for Infinity Pro

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.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Front Page header proportions for Infinity Pro

This topic is: not resolved

Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 20, 2018 at 3:20 pm #224492
    di
    Participant

    I've created <H1> and <H3> header text in my Front Page 1, using a child theme based off Infinity Pro. It fills the page wonderfully on my 13" laptop and smaller screens, however in larger desktop screens it looks lost in space (especially on a 27" screen).

    Currently the css is set at 48px and 36px, respectively. When I increase the size to fit on a desktop, it's too large for small screens.

    Any suggestions for sizing my settings to adjust proportionately?

    https://adunate.com/
    November 21, 2018 at 9:00 am #224502
    Porter
    Participant

    You have multiple routes you can go. Rather than explain it all here, I'll simply link you to a few sources. The short answer, use media queries to target specific screen sizes, or use more flexible units (not pixels) and the calc function (don't be intimidated). For further reading, Google "responsive text".

    https://www.w3schools.com/howto/howto_css_responsive_text.asp

    https://bits.citrusbyte.com/css-pro-tips-responsive-font-sizes-and-when-to-use-which-units/

    Buy me a beer? | Try DigitalOcean VPS Hosting

    November 27, 2018 at 7:36 am #224626
    di
    Participant

    Thanks @Porter for your good suggestions. One question: My theme uses both px and rem to define font size. Does this allow for responsiveness?

    November 28, 2018 at 3:47 am #224656
    Victor Font
    Moderator

    Using px and rem is a way to support cross-browser compatibility. Rem is a modern standard. Some old browsers can't translate rem units so the px units are supplied as a fall back.

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

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