Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #873318

    Hello,

    I don’t know what is wrong, but my new project (website) is displaying awfully in mobile (iPhone 5s):

    The Special Heading elements are cut off.

    Can you help me figure it out?

    Regards,

    Newton.

    #873364

    Hey newtonlinchen,

    Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
      .home #av_section_1 .av-special-heading.av-special-heading-h3 {
        font-size: 60px !important;
      }
    }

    Hope this helps :)

    Best regards,
    Nikko

    #874314

    Nikko,

    Have you check the way the site looks on mobile?

    The issue is not only the font, but also the images. The images of the Color Section simply don’t appear on mobile.

    How do I keep the mobile version neat automatically? (I mean, to create the desktop/notebook website version and it really become responsive to tablets and mobile?

    Newton

    #875558

    Hi Newton,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 767px) {
      #top #wrap_all .av-inherit-size .av-special-heading-tag {
          font-size: 26px;
      }
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #875631

    Hello, Victoria!

    Should I keed the previous code (below) or remove it and replace it with the new one?

    Previous code:

    @media only screen and (max-width:767px) {
    .home #av_section_1 .av-special-heading.av-special-heading-h3 {
    font-size: 60px !important;
    }
    }

    #875664

    Hi,

    It seems the code Victoria has provided is to replace what was given the first time.

    Best regards,
    Jordan Shannon

    #876123

    ok, I’ll try it.

    #876125

    Hello,

    Just try it.

    Please look at the image: the main content header and text are ok. But the first Header (the word is “Algoritmos”) is not reducing to be visible in mobile (I’m using an iPhone 5s to test it).

    Is there any further changes we could make?

    Newton

    #876226

    Hi,

    Do you mean the logo text? I am able to see that just fine. Please provide a screenshot of your view.

    Best regards,
    Jordan Shannon

    #881914

    Here: https://www.dropbox.com/s/0d4jy310lymu1df/2017-11-13%2011.09.36.png?dl=0

    The word ALGORITMOS, (Portuguese for “Algortihms”) is not displaying correctly. We only see “ALGORIT”

    #881937

    Hi newtonlinchen,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 767px) {
      #top #wrap_all .all_colors h1 {
        font-size: 40px;
      }
      .av-subheading.av_custom_color p {
        font-size: 28px;
      }
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #881948

    Hello,

    I put the .css code in the Quick CSS, and it didn’t work (the heading word “ALGORITMOS” is still not appearing completely, in fact, it didn’t change at all).

    So I put the code in the custom.css file

    And it didn’t work either.

    Not sure what to do, now.

    Newton.

    #881980

    Hi Newton,

    Try like this:

    
    @media only screen and (max-width: 767px) {
      #top #wrap_all .all_colors h1 {
        font-size: 40px !important;
      }
      .av-subheading.av_custom_color p {
        font-size: 24px !important;
      }
    }
    

    Best regards,
    Victoria

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.