New to Website Designing, need help with website not showing properly on Mobile

Hi,

I created a website from a template www.klixters.xyz. I checked the website on my mobile and its showing half the slider and not able to scroll down. Can some body help out, where website not working on mobile.

Regards
Digvijay

Can you explain what you mean by “not working”?

Only top slider if working and its not scrolling down from there. You open website on desktop, where its working absolutely fine. But its not working on Mobile. Then you will know the difference.

Regards
Digvijay

I was going to try “Google Mobile Friendly” free web-page test but first tried the following and got a 401 response error?

https://validator.w3.org

Seems to work in developer tool’s responsive mode. Can’t check with a mobile. :slight_smile:

What mobile device is it not working in.
Or in responsive mode, in what screen size?

Another thing: I would suggest not to use the annoying “preloader”, showing animated dots that never go away if the javascript it uses doesn’t work as intended.

A preloader has no advantage whatsoever on a slow connection, it will unnecessarily hide the page and only risk the visitor loose interest. Please don’t use it.

IMHO, it’s just a stupid bling that costs the site owner more money. :stuck_out_tongue:

3 Likes

It works on a mobile (iphone5s) also and I don’t see any vertical scrolling problems either.

There is a problem with reading the text which is part of your image of course because as you have set the slider height to 500px for small screens then the image is cropped to fit the width and height resulting in that you cannot read all of the text. This would not be a problem if the image was a real life image rather than an image of some text. You should always have text content as real text if it is meant to be read.

Notwithstanding the above the only solution is to make sure the image height is not so tall that you can’t read the text.

e.g. Reduce here in the media query to 300px.

 @media only screen and (max-width:767px)  {
     .single-welcome-slide{ height: 300px;}
    }

Alternatively find an aspect ratio slider rather than a fixed height slider. Or use real text over an image so that you can move it around as necessary.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.