Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 1, 2024 at 3:31 am #1441534
    bemodesign

    The main slider doesn’t load on Mobile view, it just shows white, until you scroll or refresh.

    screen shot and login included below

    May 1, 2024 at 8:39 am #1441552
    Ismael

    Hey bemodesign,

    Thank you for the inquiry.

    The slider image fades in correctly when we checked the site on a mobile emulation. However, to make sure that the slider image is always visible on load, try adding this css code.

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .avia-slideshow li {
    visibility: visible !important;
    opacity: 1 !important;
  }
}

    Please make sure to purge the cache afterward.

    Best regards,
    Ismael

    May 1, 2024 at 9:29 am #1441554
    bemodesign

    Still didn’t work. I tried on other mobile devices also. The slider is just white and blank, until I move. And if I refresh, it is white again.

    May 1, 2024 at 3:51 pm #1441595
    Rikard

    Hi,

    It works on my end using Chrome on an Android device, how can we reproduce the results you are seeing on your end?

    Best regards,
    Rikard

    May 3, 2024 at 5:21 am #1442034
    bemodesign

    So when you look at my website on your phone, the main slider image shows??
    On every iphone and tablet, there is a black white space where the slider is, until you start to scroll. and if you hit refresh, it goes back to white area and won’t load. How can I show you this and does anyone there have an iphone??

    May 3, 2024 at 5:32 am #1442036
    bemodesign

    I even deleted and added a new Slider, but I get the same thing, it won’t load on mobile and the area is white, until I scroll. Do you think it is because I have a lot of CSS. Could there be something in there stopping it from loading?

    • This reply was modified 6 months, 3 weeks ago by bemodesign.
    May 3, 2024 at 9:20 am #1442104
    Rikard

    Hi,

    It’s not working on my end either now. To find out if this is caused by any custom code or styling, then please tempoararily remove everything that you have added to see what happens then.

    Best regards,
    Rikard

    May 3, 2024 at 9:29 am #1442105
    bemodesign

    I think I have a lot of extra unneeded CSS code. Could you take a look and fix this for me?

    .phone-info {
    font-size: 30px;
    }

    #header_meta a, #header_meta span {
    font-size:17px !important;
    }

    /* Sticky header on mobile */
    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    /* Margin top value should be equal to header height*/
    margin-top: 130px;
    }
    .responsive #top #wrap_all #header {
    position: fixed;
    }
    }

    @media only screen and (max-width: 1200px) {
    .av-main-nav > li.menu-item { display: none; }
    .av-main-nav > li.menu-item-avia-special { display: block; }
    }

    .phone-info {
    font-size: 18px;
    }

    @media only screen and (max-width: 479px) {
    .responsive #top .slideshow_caption h2 {
    font-size: 30px !important;
    }

    .responsive #top .slideshow_caption .avia-caption-content {
    font-size: 8px !important;
    line-height: 10px;
    }

    .avia-slideshow-inner, .avia-slideshow-inner li, .avia-slideshow-inner li img {
    height: 20vh !important;
    }
    }

    @media only screen and (max-width: 767px) {
    #top #wrap_all #main .avia-section {
    background-image: none !important;
    }
    }

    .html_elegant-blog #top .post-entry .post-meta-infos,
    .html_elegant-blog .avia-content-slider .slide-meta,
    #top .news-time {
    display: none;
    }

    html, body {
    background-color: #04aef7 !important;
    }

    .page-id-2413 .slideshow_align_caption {
    vertical-align: top;
    }

    @media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */
    .avia-slideshow li {
    visibility: visible !important;
    opacity: 1 !important;
    }
    }

    May 3, 2024 at 2:40 pm #1442184
    Rikard

    Hi,

    Please try to remove all of your custom code to see if that changes anything. Also check if you have lazy load active in the theme or via a plugin for example.

    Best regards,
    Rikard

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