Responsive design does not work entirely fine

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:

Even though I have added additional CSS to ensure a proper style of my website no matter which platform (desktop, mobile, tablet) you use, it only works for some devices like iPhone X, iPad Air 2, MacBook. On the contrary, when using an iPad mini or a Samsung S8 edge the website looks messed up. Could you please also help me with this issue?

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,

when using an iPad mini or a Samsung S8 edge the website looks messed up. Could you please also help me with this issue?

I’d like to help, but please share me a screenshot where the layout mesed up. This will help compare exact result I am seeing on your site.

Regards,
Kharis