Currently, I'm encountering two issues with my code:
1) The animation I'm using for certain divs works perfectly on desktop, but when viewed on mobile devices, the page shifts slightly.
2) When fetching information from my database using AJAX, I notice that if there is too much text inside a paragraph tag, it doesn't wrap to a new line and instead extends the page.
I have included all the code I'm working with in a JSFiddle.
Although I can't replicate the first issue on JSFiddle, the code matches what's on my website where the problem arises. Perhaps you can identify the root cause.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
... (omitted for brevity)
window.onbeforeunload = function () {
if(window.scrollTo) window.scrollTo(0,0);
};
// Various JavaScript functions here...
/* CSS Styles */
html {
height: 100%;
}
body{
height: 100%;
overflow-x: hidden;
}
// Additional CSS styles...
You can access the complete code and demo on [JSfiddle]: https://jsfiddle.net/cha50tej/2/