More precisely, I can’t get the image to scroll left or white with the blurred cursor, although it works on chrome pc
The html uses overflow: auto and white space: no wrap
Any help welcome
1 Like
Do you have a link to the page in question or at least sone code that exhibits the problem you are encountering.
To test properly on a mobile you need to use a mobile as the devtools emulator is basically just a glorified resized window and will not exhibit the full characteristics of a mobile.
It’s usually good enough to test and you should be able to drag an element sideways as though you were swiping sideways.
Here’s a basic demo.
Can you provide a codepen demo of your problem to make it easier to debug.
You’ve answered the main problem. An emulator doesn’t test much. I have since uploaded to my website so I can view in my phone and it’s very different from the b emulator.
Basically all the image appears on the screen but much smaller, and it can expand.
Eventually I would like the image to appear at it’s normal height with most missing and to just scroll sideways.
The demo you showed me is intriguing and I will check it out.
Thanks for your help.
1 Like
That sounds to me as though you have not applied the viewport meta tag?
Without that tag you lose control of your mobile page as media queries no longer apply at the widths you expect.
You should not need to pinch and zoom to navigate/view a mobile site unless it’s an old fashioned site that has not been designed with mobile in mind.
You need to add this in the head of your document.
<meta name="viewport" content="width=device-width, initial-scale=1">
Don’t be tempted to change the above line as it’s really all you need.
You can read more here but it’s a complex subject. Just use the line I gave you above.
Thanks very much. I especially like the advice not to play about with code.
Thanks!
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.