Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 7, 2017 at 1:36 pm #773959
    ecoworld76

    Hi I have setup a test page, see the link:

    Contents display correctly on a normal computer screen and large phones like iPhone 6S Plus, but contents especially the text covers the whole image or the edges of the text are missing on the small phones like iPhone 5s, Iphone 6 etc.
    Please can you advise a way where all my contents are displayed perfectly on any screen size.
    I am happy if the description don’t show on the small phones so the text is reduced. Either way a solution to the problem will be great.

    Thanks,

    April 8, 2017 at 6:24 am #774288
    John Torvik

    Hey ecoworld76,

    First off, thanks for using the Enfold.

    To fix it, just add the follow custom CSS code at Enfold Theme Options > General Styling > Quick CSS

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

    Best regards,
    John Torvik

    April 8, 2017 at 6:52 pm #774641
    ecoworld76

    Hi John,

    Thanks for that, it worked.

    Another question related to the same topic. Is there any way I can assign different font size for different headings e.g. h1, h2, h3 etc depending on the screen size especially for small screen. So I can choose what is the maximum font for each heading on mobile view.

    Also is there any way of hiding Caption Text for mobile view. So I just want Caption Heading to display on smart phones.

    Thanks,

    Kind Regards,

    April 9, 2017 at 4:52 pm #775018
    Jordan Shannon

    Hi,

    You would want to use media queries and adjust the max-width to the specific size you are looking to target then sett the heading accordingly. See this link for more on media queries: https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width

    As for hiding the caption text, you can use the following in quick css:

    @media only screen and (max-width: 767px) {
    .av-subheading.av-subheading_below.av_custom_color{
    display:none!important;
    }

    }

    Best regards,
    Jordan Shannon

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