Sovling issue responsive on smartphone

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

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 7 years, 7 months ago by Nikko.

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

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

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

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