Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 6, 2018 at 9:31 pm #922508
    ZOUT

    Hi Kriese,
    I really love what we can do with your Enfold template. As we got more experienced with building, our wishes increased. Can you help us out on how to increase/decrease our h1 to fit the full width of the div (content block) it is placed in?

    On our homepage (https://zoutdesign.nl/) we would like the woord ‘smaakmaker’ to always fit full width inside the green div its placed in.
    So on mobile the text is smaller and on desktop the test is bigger.

    In ‘Styling Extra’ we defined:
    H1 – textcolor: #358e6a, font-size70px, spacing 0.7em

    Quick CSS:
    /* @font-face */
    @font-face {
    font-family: BlackGateSans;
    src: url(“http://www.zoutdesign.nl/wp-content/themes/fonts/BlackGate-Sans.otf”) format(“opentype”);
    }
    h1, h2, h4 {
    font-family: BlackGateSans !important;
    }

    March 6, 2018 at 10:48 pm #922540
    Yigit

    Hey ZOUT,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 1070px) {
#top.home #av_section_1 .no_margin.av_one_fourth {
    width: 100%;
}}
.home #av_section_1 h1 {
    font-size: calc(70px + (120 - 70) * ((100vw - 767px) / (1920 - 767)));
}

    Best regards,
    Yigit

    March 6, 2018 at 11:28 pm #922568
    ZOUT

    Hi Yigit,
    Thank you for responding so quickly.

    I have added your code to the Quick CSS section. When !important is added the font-size does change, without the size doesn’t change. Thank you.

    Still the size increases beyond the div. Probably because of the !important override.
    What notes in the equation can you change to make the size more fitting? Or how can the code be altered?

    March 6, 2018 at 11:38 pm #922583
    Jordan Shannon

    Hi,

    This is what I am seeing on my end:
    https://snag.gy/qF7Tup.jpg

    Is this not the correct view of it?

    Best regards,
    Jordan Shannon

    March 12, 2018 at 10:32 pm #925764
    ZOUT

    Sorry for my belated post!

    The issue is still present. On different devices the text stays the same font-size. Therefore the text sometimes doesn’t get displayed properly. I tried to fix it with your code, but the issue still persists.

    missing some letters at perfectionist
    Missing some letters at enthousiast
    mailadres falls outside div

    Hopefully you guys can give this a look.
    Thank you!

    March 14, 2018 at 10:07 pm #926871
    Vinay

    Hi,

    To enable custom CSS class name support from Enfold theme options > Layout Builder and check “Show element options for developers”:

    1. Add class name “col-stretch” to the columns which contain the text and image.
    3. Add the below css in quick css.

    @media only screen and (max-width:767px) {
.col-stretch.av_one_third {
width:99%!important;
clear:both
}
.col-stretch.av_one_third{
margin:0 !important;
}}

    Best regards,
    Vinay

    March 24, 2018 at 2:36 pm #932355
    ZOUT

    Hi Vinay,
    Thank you! Your code provided the structure needed to change the width. I have been able to use your code and fix the mobile displaying issues. Thank you for helping!
    Kind regards, Jurg

    This thread can be locked.

    March 24, 2018 at 11:09 pm #932502
    Vinay

    Hi,

    Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘resize text to full width div’ is closed to new replies.