Header slider display on Ipad

Hello support team,

It seem that the responsiveness of the header slider on Ipad screens is not working, in fact I have a white space on the left of the image and the image is not centered properly.

Please see attached screenshot: https://snag.gy/oTtHWJ.jpg

Thanks for helping with this.

Regards
Thomas

Dear Thomas,

Could you please share your site URL here, so I can compare with how it looks on desktop?

Regards,
Kharis

Hi Kharis,

Thanks for assisting with this, my website is on construction and yet under maintenance mode, can you please provide an email adress and I will send you access credentials.

PS: please also not that the header slider is subject to a few custom CSS rules.

Regards
Thomas

Hello there,

Please email me at kharisblank@gmail.com and mention the link to this thread.

Regards,
Kharis

Hello there,

Thank you for your email.

After inspecting your header slider with inspector tool, it appears the below custom CSS code is the source of the problem.


.slides-container .slide-item {
    background-position: -10% center !important;
}

Please try temporarily remove that code and reload your site. Let me know how it goes.

Regards,
Kharis

Hi there,

Indeed that is the CSS causing the problem thank you for identifying it. Although this rule is meant to reposition the image within the slide container (push it up to be exact) for laptops and bigger screens but it cause an issue for Ipad screens and smaller.

FYI I just changed the rule as below:

@media screen and (min-width: 775px) {.slides-container .slide-item {
background-position: -10% center !important;
}}

Seems to be working well now, thanks again for assisting with this.

Kind regards
Thomas

Great! Glad to know you figured that out!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis