Images on website displays correctly on desktop but not on mobile devices

  bootstrap-4, css, html, javascript

I want to apologize in advance for my formal lack of coding knowledge but I’m trying my best to get my site thrown together.

So far I’ve handled most troubleshooting decently but now I’ve come to a problem where images will display properly on on my desktop browser but not on any mobile devices

the website is :https://a2zexotics.com

The aforementioned image is within my slick-slider . please let me know if any more info is needed!

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>A2Z - Medical Marijuana Dispensary HTML Bootstrap Template</title>
    <!-- Bootstrap -->
    <link href="./assets/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <!-- Animate.css -->
    <link href="./assets/animate.css/animate.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome iconic font -->
    <link href="./assets/fontawesome/css/all.css" rel="stylesheet" type="text/css" />
    <!-- Slick carousel -->
    <link href="./assets/slick/slick.css" rel="stylesheet" type="text/css" />
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet" type="text/css">
    <!-- Theme styles -->
    <link href="./assets/css/theme-dark.css" rel="stylesheet" type="text/css">
    <link href="./assets/css/icon-styles.css" rel="stylesheet" type="text/css">
</head>
<body class="body">
    <div class="page-loader cube-loader">
        <div class="loader-wrap">
            <div class="loader-1 loader-element"></div>
            <div class="loader-2 loader-element"></div>
            <div class="loader-4 loader-element"></div>
            <div class="loader-3 loader-element"></div>
        </div>
    </div>
    <header class="header-white-color header-horizontal header-over header-view-side">
        <div class="container">
            <nav class="navbar"><a class="navbar-brand navbar-brand-circle" href="homepage-1.html"><span class="logo-element"><span class="logo-icon"><span class="svg-content svg-fill-theme" data-svg="./assets/images/svg/logo-part.svg"></span></span><span class="logo-text">A2Z</span></span></a>
                <button class="navbar-toggler" type="button"><i class="fas fa-bars nav-show"></i><i class="fas fa-times nav-hide"></i></button>
                <div class="navbar-collapse">
                    <div class="container">
                        <ul class="navbar-nav">
                            <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
                                <ul class="collapse nav">
                                    <li class="nav-item"><a class="nav-link" href="homepage-1.html">Homepage 1</a></li>
                                    <li class="nav-item"><a class="nav-link" href="homepage-2.html">Homepage 2</a></li>
                                    <li class="nav-item"><a class="nav-link" href="homepage-3.html">Homepage 3</a></li>
                                </ul>
                            </li>
                            
                            <li class="nav-item nav-item-arrow-down nav-hover-show-sub"><a class="nav-link" href="#" data-role="nav-toggler">Shop<span class="nav-arrow"><i class="fas fa-chevron-down"></i></span></a>
                                        <ul class="collapse nav">
                                            <li class="nav-item"><a class="nav-link" href="a2z_flower.html">Flower </a></li>
                                            <li class="nav-item"><a class="nav-link" href="blog-2-cols.html">Concentrates</a></li>
                                            <li class="nav-item"><a class="nav-link" href="blog-sidebar-right.html">Edibles</a></li>
                                            <li class="nav-item"><a class="nav-link" href="blog-sidebar-left.html">Drinks</a></li>
                                            <li class="nav-item"><a class="nav-link" href="article.html">Pre-rolls</a></li>
                                            <li class="nav-item"><a class="nav-link" href="article-sidebar-right.html">Topicals</a></li>
                                            <li class="nav-item"><a class="nav-link" href="article-sidebar-left.html">Transdermals</a></li>
                                            <li class="nav-item"><a class="nav-link" href="article-sidebar-left.html">Clones</a></li>
                                            <li class="nav-item"><a class="nav-link" href="article-sidebar-left.html">Acessories</a></li>
                                        </ul>
                                    </li>
                            
                            <li class="nav-item"><a class="nav-link" href="blog-sidebar-right.html">Blog</a></li>
                            <li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
                            <li class="nav-item"><a class="nav-link" href="contact-us.html">Contact</a></li>
                        </ul>
                        <div class="navbar-extra">
                            <ul class="actions-nav">
                                <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-search"></i><span class="navbar-mobile">&nbsp;&nbsp;Search</span></a></li>
                                <li class="nav-item nav-item-arrow-down nav-hover-show-sub"><a class="nav-link" href="#" data-role="nav-toggler">USD
                                    <ul class="collapse nav">
                                        <li class="nav-item"><a class="nav-link" href="#">USD</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item nav-item-arrow-down nav-hover-show-sub"><a class="nav-link" href="#" data-role="nav-toggler">English
                                    <ul class="collapse nav">
                                        <li class="nav-item"><a class="nav-link" href="#">English</a></li>
                                        
                                    </ul>
                                </li>
                                <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user"></i>&nbsp;&nbsp;Sign In</a></li>
                                <li class="nav-item"><a class="nav-link" href="shop-cart.html" data-show-block="cart"><i class="fas fa-shopping-bag"></i><span class="navbar-mobile">&nbsp;&nbsp;Cart</span><span class="cart-quantity"><span class="badge badge-pill badge-warning"></span></span></a></li>
                            </ul>
                            <div class="navbar-info">
                                <div class="navbar-info-title">For demo purposes only.</div>
                                <div class="navbar-info-value">+ 88 018 4113 6251</div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <section class="after-head slick-top-full">
        <div class="slick-view-banner slick-carousel" data-slider="top-side-dots">
            <div class="slick-slides">
                <div class="slick-slide">
                    <div class="entity-banner section-white-text content-offs section-solid with-back">
                        <div class="overflow-back cover-image" background-size: cover; data-background="./assets/images/parts/testing.jpg" style="background-image: img src=("./assets/images/parts/testing.jpg") class="img-responsive" alt="Responsive Image"></div>
                        <div class="overflow-back bg-body-back opacity-80"></div>
                        <div class="container text-center entity-content">
                            <div class="my-auto row">
                                <div class="col-lg-9 mx-auto">
                                    <h2 class="h1 entity-title">Here to <span class="text-theme">Help</span> </h2>
                                    <p class="mb-4 pb-2 entity-text">At A2Z we cater to everyone's taste. No mater what your flavor is , we got it. Shop from a range of domestically sourced genetics as well as our core namesake line of A2Z products
                                    </p>
                                    <div class="entity-action-btns"><a class="btn-wide btn btn-theme" href="article-sidebar-right.html">read more</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <div class="entity-banner section-white-text content-offs section-solid with-back">
                        <div class="overflow-back cover-image" data-background="./assets/images/parts/stash.jpg" style="fluid: url("./assets/images/parts/stash.jpg")></div>
                        <div class="overflow-back bg-body-back opacity-80"></div>
                        <div class="container text-center entity-content">
                            <div class="my-auto row">
                                <div class="col-lg-9 mx-auto">
                                    <h2 class="h1 entity-title">Accessories <span class="text-theme">galore</span></h2>
                                    <p class="mb-4 pb-2 entity-text">We pride ourselves on our extensive and versatile collection of accessories and pieces here at A2Z. Whether your looking for a new rig, your favorite wraps, or just arent quite sure what you're looking for; let us know , we'd love to help!
                                    </p>
                                    <div class="entity-action-btns"><a class="btn-wide btn btn-theme" href="shop-sidebar-right.html">shop now</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <div class="entity-banner section-white-text content-offs section-solid with-back">
                        <div class="overflow-back cover-image" data-background="./assets/images/parts/pickup.jpg" style="background-image: url("./assets/images/parts/pickup.jpg") style= background-size:"cover";></div>
                        <div class="overflow-back bg-body-back opacity-80"></div>
                        <div class="container text-center entity-content">
                            <div class="my-auto row">
                                <div class="col-lg-9 mx-auto">
                                    <h2 class="h1 entity-title"><span class="text-theme">Curbside Pickup </span> Now available</h2>
                                    <p class="mb-4 pb-2 entity-text">Love our products but hate the lines? Order ahead and well get it ready and bring it out to your car once you're here!
                                    </p>
                                    <div class="entity-action-btns"><a class="btn-wide btn btn-theme" href="shop-sidebar-right.html">buy now</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Source: Ask Javascript Questions

LEAVE A COMMENT