Printable View
How To Make Website not Scroll Left To Right on Mobile?
The website I am refer is below List of of US Presidents.
https://www.listofusapresidents.com/
On the Mobile Phone it always keeps moving horizontally. It's suppose to be a straight forward vertically user interface to view the list of the u.s. presidents in order.
I've been trouble shooting with the html, css and more to try to figure this out for months but can't figure it out.
Let me know if you can lend a hand :)
Thank you.
Here is what I think the problem is ...
If you download notepad++ (which is free), you can see where things might be bad.
https://notepad-plus-plus.org/
Copy and paste your entire HTML into notepad++ and select PHP as the language to view it.
Things will then be highlighted, and the source will be given line numbers to make troubleshooting easier.
If you highlight a <div>, it will show you where the closing </div> is located.
if you highlight any tag, it will show the closing tag.
So on line number 3227 you have a <div class="w-100"> but no closing </div>
See this part as an example:
You start with a <section> and end with </section>Code:<section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="contribute">
<div class="w-100">
<h2 class="mb-5">Contribute</h2>
<h3>Be apart of our movement!</h3>
<p>We hope our informational website of the USA President’s will help every American understand our history from the beginning to present. </p>
<p>By educating the masses we believe it will only unite our nation.</p>
<p>If you agree, cast your vote by sharing this website to friend or family member!</p>
<font size="+2" color="#c00a32"><b>If You Agree, Cast Your Vote by Sharing This Website to a Friend or Family Member!</b></font>
<font size="+3" color="#022866"><b>SUPPORT US BY SHARING!</b></font> <br> <div class="fb-like" data-href="https://www.listofusapresidents.com/" data-layout="standard" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div>
<div class="resume-date text-md-right">
<a class="nav-link js-scroll-trigger" href="#listofuspresidents">Back to Top <i class="fas fa-arrow-circle-up"></i></a>
</div>
<hr class="m-0">
</section>
There is a <div class="w-100"> within <section>, but there is no closing </div>
This happens in a couple places on your website.
Here is a "valid" and proper <div> that you have in that section (a properly opened <div> and a closing </div>) ...
<div class="resume-date text-md-right">
<a class="nav-link js-scroll-trigger" href="#listofuspresidents">Back to Top <i class="fas fa-arrow-circle-up"></i></a>
</div>
Opened and NOT closed tages will cause things like horizontal scrolling because of width problems.
The browser doesn't know the width of multiple divs, or unclosed divs ... it gets confused.
As another troubleshooting tool, view your site on a laptop or desktop browser. Now instead of full browser window, click to minimize and use your mouse to shrink the width. As you shrink it, you'll see the content collapse as it should and suddenly the horizontal line appears. It's that specific width that you'll learn where this happens. Delete parts of your web page until that no longer happens. You'll then know where the bad "section" is located.
Hey thank you for taking the time to look into this.Quote:
Originally Posted by mlseim
I tried what you did and it still kept showing the extra space on the right. So i just decided to delete all the content on the index.php from "ABOUT OUR MOVEMENT" to "CONTRIBUTE" and the sliding to the right went away. See here https://www.listofusapresidents.com/
But for the CONTACT page there must be the problem in their causing the shift to the right because this opens to a new page see here how this page still has space on the right https://www.listofusapresidents.com/contact
Thank you for your time and assistance as it it greatly appreciated :)
Guess i will never know!!! lol thank you for your help though.
I don't see the space ... I thought you must have fixed it.