Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #702968

    Dear Enfold team,

    I have a problem. when i am going to check on smartphone my “Home” page is not respinsive at all. Cut all main images on “Home”. i would like text below ( what costumers say) on “Home” is responsive too.

    Thanks for help.

    • This topic was modified 8 years, 2 months ago by AlexBellaTropea. Reason: more issue
    #702982

    Hey AlexBellaTropea,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Nikko

    #702983

    Hello again,

    I posted my login credentials. Yuo have permission to deactivate plugins if necessary.

    #703537

    Hey!

    Thanks for providing the login. This issue should be fixed, I have added this code in your Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:980px) {
      .avia-fullscreen-slider .avia-slideshow {
        max-height: 360px;
      }
    }
    
    @media only screen and (max-width:767px) {
      .avia-fullscreen-slider .avia-slideshow {
        max-height: 220px;
      }
    }

    The 360px is for ipad (portrait mode) and 220px is for mobile, just adjust the values as you see fit. Hope this helps, if you have any questions related to this topic, let us know. :)

    Cheers!
    Nikko

    • This reply was modified 8 years, 2 months ago by Nikko.
    #703760

    Hello Enfold team,

    I looked at your changes, it’s ok for smartphone, but on tablet screen the images of “Home” are too short and cut. Any help? i would like to have responsive but not short and cut images of “Home” on tablet screen. Then, can i reduce the shape of arrow and small balls when i scrow pictures? the are too big, especially on smartphone screen.

    This kind of code in my Quick CSS, where can i locate and save them? i don’t want to see them on Quick CSS.

    Thank you very much

    Alex

    • This reply was modified 8 years, 2 months ago by AlexBellaTropea. Reason: more details
    #703929

    Hi,

    For the tablet screen on the homepage, what is short and cut, portrait? landscape? or both? if it’s only portrait just edit this code (based on code above):

    @media only screen and (max-width:980px) {
      .avia-fullscreen-slider .avia-slideshow {
        max-height: 360px;
      }
    }

    try to change max-height to 500px, the bigger the size the bigger the cut, the smaller the size the lesser the cut.

    For the slider arrows, kindly replace this code:

    @media only screen and (max-width:767px) {
      .avia-fullscreen-slider .avia-slideshow {
        max-height: 220px;
      }
    }

    to this one:

    @media only screen and (max-width:767px) {
      .avia-fullscreen-slider .avia-slideshow {
        max-height: 220px;
      }
    
      #top .avia-slideshow-arrows a {
        width: 30px;
        height: 40px;
        line-height: 40px;
        margin-top: -20px;
      }
    
      #top .avia-slideshow-arrows a:before {
        line-height: 40px;
        font-size: 20px;
      }
    
      .avia-slideshow-dots a {
        height: 10px !important;
        width: 10px !important;
        border-radius: 10px !important;
        padding: 4px !important;
        margin-left: 2px;
        margin-right: 2px;
      }
    }

    Let us know if it works :)

    Best regards,
    Nikko

    #703974

    Dear Enfold team,

    I solved the problem with arrows and small dots, thank you very much. About size of pictures, i mean all pictures that you can see on “Homepage” and scrow them. The sizes of pictures on “homepage” on PC and Smartphone works good, for example the first picture of bedroom with breakfast tray on the bed, you can see in perfect size on Smartphone and on Pc screen, but unfortunately not on Tablet screen, take a look yourself please, you cannot see on tablets the first picture of bedroom with breakfast tray on the bed, same problem of all pictures that you can scrow them on “homepage” on Tablet, that cuts sizes completely the pictures on “Homepage”. The problem is on Tablet now.

    I need other help, the texts under “what customers say about us” on Smartphone are too thin and restricted, how can i see in a normal way, like on PC screen?

    Finally, where can i put all these codes? Avoiding to leave all them on Quick CSS?

    I hope that you understand everything.

    Thank you very much

    Alex

    • This reply was modified 8 years, 1 month ago by AlexBellaTropea. Reason: i need more help
    #705473

    Hi,

    Can you post screenshots of the things you have mentioned, like how it looks on a tablet (which is a problem), how it looks on desktop (no issues) just for comparison and we can see better in your perspective as well as it will be easier for us to provide a solution. Also include the thin text as I can see it just the same on my end.

    As for the solutions, it’s better to keep it in Quick CSS or if you have child theme, in your child theme’s style.css. This is much safer since you won’t lose any of it during theme update.

    Best regards,
    Nikko

    #705504

    Hello,
    Take a look on screenshots.

    This is how is seen in a good way on pc screen
    Seen in a good way

    On tablet is seen in a wrong way On tablet is seen in a wrong way

    This is how it seen texts on smartphone This is how is seen texts on smartphone

    I hope that you understood and can see,

    Thanks

    #705569

    Hi!

    Try to change this code:

    @media only screen and (max-width:767px) {
      .avia-fullscreen-slider .avia-slideshow {
        max-height: 220px;
      }
    
      #top .avia-slideshow-arrows a {
        width: 30px;
        height: 40px;
        line-height: 40px;
        margin-top: -20px;
      }
    
      #top .avia-slideshow-arrows a:before {
        line-height: 40px;
        font-size: 20px;
      }
    
      .avia-slideshow-dots a {
        height: 10px !important;
        width: 10px !important;
        border-radius: 10px !important;
        padding: 4px !important;
        margin-left: 2px;
        margin-right: 2px;
      }
    }

    To this one:

    @media only screen and (max-width:767px) {
      .avia-fullscreen-slider .avia-slideshow {
        height: 500px !important;
        max-height: 500px;
      }
    
      #top .avia-slideshow-arrows a {
        width: 30px;
        height: 40px;
        line-height: 40px;
        margin-top: -20px;
      }
    
      #top .avia-slideshow-arrows a:before {
        line-height: 40px;
        font-size: 20px;
      }
    
      .avia-slideshow-dots a {
        height: 10px !important;
        width: 10px !important;
        border-radius: 10px !important;
        padding: 4px !important;
        margin-left: 2px;
        margin-right: 2px;
      }
    }
    
    @media only screen and (max-width:600px) {
      .avia-fullscreen-slider .avia-slideshow {
        height: 220px !important;
        max-height: 220px;
      }
    
      .responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
        padding: 0 10px !important;
      }
    }

    Let us know if this helps :)

    Best regards,
    Nikko

    #706096

    Dear @Nikko,

    Thank you very much. You solved my problems. Now it works perfectly.

    Best regards,

    Alex

    #706149

    Hey Alex,

    Glad we could help. We would also appreciate to leave some feedback at themeforest rating page, with that nice review!
    It really helps us a lot! :)

    Cheers!
    Nikko

    #706155

    Dear @Nikko and Kriesi Team,

    I will do. you deserve it.

    Kind regards,

    ALex

    #706162

    Dear @nikko and Kriesi Team,

    I have just left review. You deserve it. I would like to offer you a beer or coffe :)

    Kind regards,

    ALex

    #706184

    Hi Alex,

    Thanks for your kind words and for using Enfold :)

    Best regards,
    Nikko

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Sovling issue responsive on smartphone’ is closed to new replies.