Looking for some advice for my django website. I recently deployed it on heroku and it seems to be working well, except for the "final view" on smartphones. Everything looks good on PC, but on mobile devices, there is a slight horizontal and vertical scroll.
I suspect this is due to using the "zoom" CSS functions on my images to align them how I wanted. However, I only used zoom to make small images bigger, not the other way around, so it should technically be fine, right?
Is there a way to fix this without disrupting the rest of my work? I came across this StackOverflow thread: DISABLE the Horizontal Scroll. But trying to counter user scrolling with JavaScript as a plan B or C doesn't sound too appealing...
Here are some screenshots illustrating the issue:
https://i.sstatic.net/rE5IQ.jpg https://i.sstatic.net/0oDyI.jpg
Below is the template for this page:
{% extends "builder/base.html" %}
{% load static %}
{% block content %}
<!DOCTYPE html>
... (omitted for brevity) ...
<!--Javascript that I used for making cloud from before disappear after given amount of ms. Opacity from 1 to 0.-->
<script>
function displayOut() {
var a = document.getElementById('id_cloud_1');
setTimeout(function(){
a.style.opacity='0';
}, 200);
var b = document.getElementById('id_cloud_2');
setTimeout(function(){
b.style.opacity='0';
}, 300);
var c = document.getElementById('id_cloud_3');
setTimeout(function(){
c.style.opacity='0';
}, 400);
}
displayOut();
</script>
</div>
</body>
</html>
{% endblock %}
Any help would be greatly appreciated! Thanks!