Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 12, 2021 at 11:54 am #1299897
    gianmarizzi

    Hello,
    I have notice that the theme has some issues with headlines responsiveness.

    For instance:
    on Advanced Styling, I set my H1 to 80 px (and my suggestion is it would be great if I could also set the mobile size in the same place).
    Here is an example: https://www.geoclima.com/pro/special-products-line-italy/
    On mobile view, the headline is too big and word-wrap doesn’t work (another function I would recoomend to implement on next releases).

    I know the Special Heading of Avia Layout Builder allows to set different sizes but I would like to do find an overall fix.
    Or at least to set a proper word-break on mobile view, because some languages such as German and Russian have very long words.

    May 13, 2021 at 1:35 pm #1300143
    Rikard

    Hey Gian Maria,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.av-special-heading-tag {
    word-break: break-word;
}
}

    Best regards,
    Rikard

    May 14, 2021 at 8:33 am #1300261
    gianmarizzi

    Hi,
    it doesn’t seem to work.
    How can I set proper headline sizes?

    May 14, 2021 at 12:04 pm #1300310
    Guenni007

    read here an interesting article: https://css-tricks.com/how-do-you-do-max-font-size-in-css/

    maybe you can use on quick css : 

    #top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1 {
    font-size: min(max(36px, 10vw), 80px);
    line-height: 1.2em;
    font-weight: 900;
    text-transform: uppercase;
    hyphens: auto;
}

    min(max(36px, 10vw), 80px); means max font-size is 80px – ( it starts shrinking when 80px is the 1/10 of the screen width (800px) )
    if you got 5vw ( it starts shrinking when the 80px is 1/20 of the screen width ( it is 1600px )
    36px is the min font-size

    May 14, 2021 at 12:31 pm #1300314
    gianmarizzi

    Hi,
    thanks but I’m not sure is what I’m looking for.
    There are several element in Avia Layout Builder where the responsiveness option means you can only set the element visibility
    E.g. The Promo box at the bottom of my home page (www.geoclima.com) with the call to action to subscribe our newsletter has a bad aspect on mobile version, but threre’s no option to set it properly.
    So at least I need a way to set overall headline sizes (not only H1) at a certain screen size breakpoint.

    May 18, 2021 at 5:15 am #1300857
    Rikard

    Hi,

    Sorry for the late reply. You will need custom CSS in order to adjust that unfortunately. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.avia-promocontent h2 {
    font-size: 30px;
}
}

    Or you could try duplicating the element for mobile, and set the visibility accordingly.

    Best regards,
    Rikard

    May 18, 2021 at 8:32 am #1300886
    gianmarizzi

    The code doesn’t work, I also tried to put it down to 20 px but on mobile nothing happens.
    The second tip is fine.
    Thanks.

    May 19, 2021 at 5:31 am #1301117
    Nikko

    Hi gianmarizzi,

    Can you try to use this CSS code instead:

    @media only screen and (max-width: 767px) {
  #top #wrap_all .av_promobox .avia-promocontent h3 {
    font-size: 30px;
  }
}

    Best regards,
    Nikko

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