Picture do not load properly

Hi guys,

I’ve designed my website www.myteamshop.de using the WP Sydney theme. Although the website itself works fine there are still some issues to be addressed / some adjustments to be made:

My website appears to be kind of slow, especially in the middle section where it shows screenshots. These screenshots take ages to load - if they load at all. I seems that I have to initially click on them in order to show anything but white. Anything I can adjust?

I have already applied some piece of CSS, maybe this helps to further understand the logic of my website:

.btn-menu{
     color: #000;
}
 @media only screen and (max-width:1025px){
     .header-wrap .container{
         text-align: left;
    }
     .header-wrap .btn-menu{
         float: right;
         margin-right: 15px;
    }
     .header-wrap .col-md-4 {
         max-width: 90%;
         position: relative;
         z-index: 1000;
    }
     .header-wrap .col-md-8 {
         margin-top: -60px;
    }
     #mainnav-mobi {
         top: 70px;
    }
}
 #mainnav-mobi ul > li > a {
     color: black;
}
 #mainnav-mobi {
     background-color: white;
}
 @media only screen and (min-width: 1024px) and (max-width: 1024px) {
     .slide-inner {
         top: 40%;
         padding-left: 100px !important;
    }
     .subtitle {
         top: 0%;
         padding-left: 0px !important;
         padding-top: 50px !important;
         text-align: left;
         font-size: 28px !important;
    }
     .maintitle {
         padding-left: 0px !important;
         text-align: center;
    }
     .roll-button {
         top: 50px;
         left: -310px;
    }
     .nf-form-content input[type="button"] {
         color: #FEFEFE !important;
         background-color: #102C3D !important;
         font: 13px lato, raleway;
         font-weight: bold;
    }
}
 @media only screen and (min-width: 1025px) {
     .slide-inner {
         top: 45%;
         padding-left: 100px !important;
    }
     .subtitle {
         top: 0%;
         padding-left: 0px !important;
         padding-top: 100px !important;
         text-align: left;
         font-size: 28px !important;
    }
     .maintitle {
         padding-left: 0px !important;
         text-align: center;
    }
     .roll-button {
         top: 20px;
         left: -445px 
    }
     .nf-form-content input[type="button"] {
         color: #FEFEFE !important;
         background-color: #102C3D !important;
         font: 13px lato, raleway;
         font-weight: bold;
    }
}
 @media only screen and (min-width: 375px) and (max-width: 812px) {
     .slide-inner {
         top: 40%;
         padding-left: 10px !important;
    }
     .subtitle {
         top: 0%;
         padding-left: 10px !important;
         padding-top: 30px !important;
         text-align: left;
         font-size: 16px !important;
    }
     .maintitle {
         padding-left: 0px !important;
         text-align: center;
    }
     .roll-button {
         top: 32px;
         left: -90px 
    }
     .nf-form-content input[type="button"] {
         color: #FEFEFE !important;
         background-color: #102C3D !important;
         font: 13px lato, raleway;
         font-weight: bold;
    }
}
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
     .header-wrap .btn-menu {
         margin-top: 50px;
    }
}

I really hope you can help me with these issues.

Thanks a lot.

Regards,

Sebastian

Hello Sebastian,

It looks like there’s script conflict with lazy load on elementor image carousel. Try disabling lazy load script from A3 Lazy Load plugin.

Regards,
Kharis