Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #503068

    Regarding elements that don’t have the option to change font size, what is the proper way to adjust their size/appearance so it responds appropriately with different screen sizes?

    For instance, I want to change the size of the text on a full-width button. Is this the proper CSS to ensure it ‘responds’ to varying screen sizes?

    .avia_iconbox_title {
    font-size: 1.5em;
    font-weight: bold;
    }

    Furthermore, if I want to change the space between the title and button text (below), I should use the “em” sizing instead of absolute “px”, correct?

    .av-button-description-below {
    margin-top: 0.2em;
    }

    Both work and do what I want. I just want to ensure this is the proper way of adjusting text when using your theme.
    THANKS!

    David

    #503085

    Hi David!

    em is relative to the base font size (which is either set manually or by the browser default), what you want is probably something like this:
    https://css-tricks.com/viewport-sized-typography/

    Cheers!
    Josue

    #503122

    That’s interesting. Never knew that property existed. Thanks.

    So, in my case, does the “em” seem to work because the “font-size” property set by the theme itself was created with responsiveness in mind? It’s just making whatever responsive value 1.5x bigger?

    #503158

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.