Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 28, 2022 at 12:07 pm #1342526
    gianmarizzi

    Hi,
    I need support to set font responsiveness properly.

    Especially for caption on Fullwidth Easy Slider and post h1.

    Thanks.

    February 28, 2022 at 1:15 pm #1342552
    Yigit

    Hey,

    Thanks for contacting us!

    You can adjust responsive font sizes for Fullwidth Easy Slider in Enfold theme options > General Styling > Typography.
    Typography settings do not override post titles so please use following custom CSS code

    #top .fullsize .template-blog .post-title { font-size: 30px; } 
@media only screen and (max-width: 990px) { 
#top .fullsize .template-blog .post-title { font-size: 26px; }
}
@media only screen and (max-width: 767px) { 
#top .fullsize .template-blog .post-title { font-size: 22px; }
}
@media only screen and (max-width: 480px) { 
#top .fullsize .template-blog .post-title { font-size: 18px; } 
}

    Best regards,
    Yigit

    February 28, 2022 at 2:09 pm #1342561
    gianmarizzi

    About post titles, I tried but it didn’t work.

    February 28, 2022 at 2:19 pm #1342563
    gianmarizzi

    About Fullwidth Easy Slider: if I understand right, Enfold theme options > General Styling > Typography allows to set sizes for all headlines across the website, but it doesn’t help me set the responsiveness of a particular caption of a Fullwidth Easy Slider.

    February 28, 2022 at 2:29 pm #1342565
    Yigit

    Hi,

    1- Could you please post a link of your page so we can make sure we are providing accurate CSS code?

    2- You can edit your element and click on the slide and go to Styling > Font Sizes to adjust responsive font size – https://imgur.com/a/ojH7j1N

    Best regards,
    Yigit

    February 28, 2022 at 2:44 pm #1342567
    gianmarizzi

    1- See private content. H1 is set to 80px on Advance setting. I would like to set it also for other screen sizes.
    2- I’ve already set the Font size there but it only allows to set the fullwidth size (can’t find responsiveness setting)

    February 28, 2022 at 3:01 pm #1342568
    Yigit

    Hi,

    1- Please use following code instead

    @media only screen and (max-width: 990px) { 
#top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1 { font-size: 26px; }
}
@media only screen and (max-width: 767px) { 
#top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1 { font-size: 22px; }
}
@media only screen and (max-width: 480px) { 
#top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1 { font-size: 18px; } 
}

    2- Please click on the icons to set font size for different screen sizes – https://imgur.com/a/mZoQ9Z4

    Regards,
    Yigit

    February 28, 2022 at 6:09 pm #1342592
    gianmarizzi

    1 – not working
    2- it works (sorry, I was sure I had already set them)

    March 1, 2022 at 4:51 pm #1342739
    gianmarizzi

    Btw, I got the same issue (1) on other websites based on Enfold theme. It looks like your code can’t override the Advance Styling settings.

    March 1, 2022 at 4:56 pm #1342741
    Yigit

    Hey,

    Could you please try adding !important rule and check if that helps?

    @media only screen and (max-width: 990px) { 
#top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1 { font-size: 26px !important; }
}
@media only screen and (max-width: 767px) { 
#top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1 { font-size: 22px !important; }
}
@media only screen and (max-width: 480px) { 
#top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1 { font-size: 18px !important; } 
}

    Cheers!
    Yigit

    March 1, 2022 at 5:30 pm #1342745
    gianmarizzi

    It works!
    Thanks.

    March 1, 2022 at 5:35 pm #1342746
    Yigit

    Hi,

    You are welcome! Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Font responsiveness issues’ is closed to new replies.