Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 16, 2016 at 2:24 am #598730
    Imraanio

    Hi,

    I have set my H1 font size to 65px but want it to resize (become smaller) when it is viewed with a smartphone. After searching, I added the following to the Quick CSS in General Styling.

    @media only screen and (max-width: 480px) {
    h1.av-special-heading-tag {
    font-size: 30px!important;
    }}

    Yet, the font does not load smaller on my smartphone.Is there any way I can get this sorted?

    Thanks
    Imraan

    March 16, 2016 at 3:58 am #598739
    Vinay

    Hi Imraanio!

    Please use the below CSS in Quick CSS under Enfold > General styling

    @media only screen and (max-width: 480px) {
.avia_textblock.av_inherit_color h1 {
font-size: 30px!important;
}}

    Best regards,
    Vinay Kashyap

    March 16, 2016 at 12:58 pm #598906
    Imraanio

    Thanks Vinay. That worked a treat.

    Is there any way I could do the same for the Icons as well? They have caption but I expect the size of the caption will be reduced with the icon?

    Cheers,
    Imraan

    March 16, 2016 at 6:43 pm #599101
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 480px) {
a.av-icon-char {
    font-size: 20px!important;
    line-height: 20px!important;
    width: 20px!important;
}}

    Regards,
    Yigit

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