avia gallery thumbs are not displayed correctly on mobile devices

Hey soltner,

Thank you for the inquiry.

We can’t reproduce the issue on our end. What is the actual model of the device where the screenshot was taken? If the issue persists, please try adding this css code.

@media only screen and (max-width: 489px) {

  /* Add your Mobile Styles here */
  .avia-chrome .avia-gallery-thumb {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  #top #wrap_all .avia-gallery .avia-gallery-thumb a {
    display: block;
    float: none;
  }
}

Best regards,
Ismael

Hi,
Thank you for the link to your site but it seems down right now, please check.

Best regards,
Mike

Hi,
Are you blocking certain countries? Please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,

Thank you for the update.

There might be a missing curly brace somewhere in your style.css file because the previous modification we provided is also being applied to the desktop view. Please remove the previous css code and replace it with the following.

.avia-gallery-thumb {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

To make sure that there are no invalid css rules, please use this tool.

// https://www.cssportal.com/css-validator/

Best regards,
Ismael

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard