Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #583898

    I have a page where a few words are not responding correctly with the responsive design of Enfold. They are falling off the screen on an iPhone 6 in safari. I haven’t seen this problem anywhere else but this is a very popular device for many people accessing the web via mobile device.

    Images and link to page is below. Thanks!

    iPhone Screenshots:
    https://www.dropbox.com/sh/ijpewbotxqaotbd/AAAPq9J-cib0mTdq_rl0aYrma?dl=0

    Link to webpage:

    #584746

    Hi Jdclark18!

    please add the below code to Enfold > General Styling > Quick CSS

    @media screen(max-width:768px) {	
    	h1.av-special-heading-tag {
    	    font-size: 2em!important;
    	}
    }

    Regards,
    Vinay Kashyap

    #585026

    Hey Vinnie, thanks for the reply. Unfortunately, that didn’t work. Any other advice?

    #585069

    Hi!

    Please disable CSS minifying feature and flush cache and refresh your page a few times. If that does not help, please create a temporary admin login and post it here privately.

    Best regards,
    Yigit

    #585124

    Thanks Yigit, I’ve tried refreshing, clearing caches and don’t have any minifying plug-ins. The word “Celebration” is still too long on this page. That word is actually on there twice on the same page.

    Temporary admin login is in the private content. Thank you!

    #585718

    Hey!

    There was this code in custom css from which we had to remove !important

    /*  Special Heading Changes   */
    
    h1.av-special-heading-tag {font-weight:bold!important; font-size:50px!important;}
    

    You can now adjust the 2.5em in the below code it works fine.

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

    Regards,
    Vinay Kashyap

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