Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
Like Tree2Likes
  • 2 Post By mlseim

Thread: How To Make Website not Scroll Left To Right on Mobile

  1. #1
    Member longislandhub's Avatar
    Join Date
    Jan 2019
    Location
    Commack
    Posts
    61
    Member #
    60353
    Liked
    7 times

    Question How To Make Website not Scroll Left To Right on Mobile

    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.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,782
    Member #
    5580
    Liked
    723 times
    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:
    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>
    You start with a <section> and end with </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.
    Last edited by mlseim; Jan 13th, 2020 at 05:37 PM.
    sibert and longislandhub like this.


  4. #3
    Member longislandhub's Avatar
    Join Date
    Jan 2019
    Location
    Commack
    Posts
    61
    Member #
    60353
    Liked
    7 times
    Quote Originally Posted by mlseim View Post
    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:
    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>
    You start with a <section> and end with </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.

    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

  5. #4
    Member longislandhub's Avatar
    Join Date
    Jan 2019
    Location
    Commack
    Posts
    61
    Member #
    60353
    Liked
    7 times
    Guess i will never know!!! lol thank you for your help though.

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,782
    Member #
    5580
    Liked
    723 times
    I don't see the space ... I thought you must have fixed it.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 08:40 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com