Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 12, 2021 at 8:52 pm #1271983
    dillionline

    Hey,

    I use ENFOLD since some years, it´s great!

    Now I want to improve my responsive webdesign workflow:
    What´s the best way to do setup responsive type for mobile in ENFOLD using css?
    I don´t want to set every size in the respective headline or whatever …
    I want to set the responsive type sizes centralized in css.
    So should I usw the “vw” value? Or what about fluid type? (https://css-tricks.com/snippets/css/fluid-typography/)

    What do you recommend?

    THANK A LOT and stay save.

    • This topic was modified 3 years, 11 months ago by dillionline.
    January 17, 2021 at 3:07 pm #1273062
    Victoria

    Hey dillionline,

    Could you please attach some screenshots of the issue?

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    January 24, 2022 at 4:08 pm #1336913
    dillionline

    Hello again, some time is gone …

    I want wo archieve a flexible change of the Tyesize when resizing the BrowserWindow or using Smartphone, Tablet with different screen sizes.

    Now I see that you build in “Advanced Options: Customize Typography Settings” since 4.8.8.

    That´s great, but not working in my case, see screenshots please:
    https://web.tresorit.com/l/uwq3Z#nyIADoRt6u8jmh_7aHZmbg

    January 25, 2022 at 9:28 am #1337000
    Ismael

    Hi,

    Thank you for the update.

    Did you update enable the Enfold > Performance > File Compression settings? You may need to disable these options first before editing the site, or just make sure to toggle them and purge the cache afterwards.

    Best regards,
    Ismael

    February 1, 2022 at 4:09 pm #1338257
    dillionline

    I disbled the chaching stettings for CSS and JavaScript Files.

    In my case it don´t works for:
    h1.av-special-heading-tag
    h2.avia-caption-title

    It only works for:
    h2.av-special-heading-tag

    February 1, 2022 at 4:20 pm #1338260
    Yigit

    Hi,

    Thanks for contacting us!

    Could you please post a link to your page where we can see the issue? Also, have you edited H1 or H2 tagged elements in Enfold theme options > Advanced Styling? Options in Advanced Styling tab override the options in Typography tab.

    Best regards,
    Yigit

    February 2, 2022 at 12:32 am #1338330
    dillionline

    Website: https://olesjathiessen.de/
    I used this ENFOLD Demo Content: https://kriesi.at/themes/enfold-health-coach/
    See the Demo when resizing to Phone-Portrait the H2 Headline “Hi, I am Emma Fold!” is too small.
    I want to change that with the new “Advanced Options: Customize Typography Settings”.

    Thank for supporting me :-)

    February 2, 2022 at 7:57 am #1338391
    Ismael

    Hi,

    Looks like the default style for the caption is overriding the advanced styling. Please try to add this css code temporarily to adjust the title of the captions on mobile view.

    @media only screen and (max-width: 479px) {
    .responsive #top .slideshow_caption h2 {
        font-size: 70px !important;
    }
}

    Best regards,
    Ismael

    February 2, 2022 at 9:44 am #1338403
    Guenni007

    for some headings i prefer the method of fluid font-size – but i use the clamp values –
    like: 

    font-size: clamp(1.5rem, 2.5vw, 4rem); 

    font-size: clamp(min, mid, max);

    min: The minimum value is the smallest value. This is the lower bound in the range of allowed values. If the preferred value is less than this value, the minimum value will be used.
    mid: The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.
    max: The maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound.
    See: https://webers-testseite.de/heading-with-fluid-font-size/
    and : #top .av-special-heading.fluid-font .av-special-heading-tag {font-size: clamp(25px, 7vw, 150px) !important;}

    February 2, 2022 at 12:12 pm #1338440
    Ismael

    Hi,


    @Guenni007    : Thanks for the info! :)

    Best regards,
    Ismael

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