Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by ibbhfsmeaf
ibbhfsmeaf
4,568 Points

Why does my donate.php page have that white spacing to the right?

If you go to http://desimara.com/donate.php on your phone or desktop, you will notice that there is a scroll bar at the bottom that allows you to scroll right about 20 pixels.

I had the same issue on a couple of other pages but I managed to fix them. I've tried fixing the donate.php page for an hour now but I just can't seem to find the problem. Can anyone help please?

<?php include('header.php'); ?>
    <section>
     <div class="row full-width instructions2">
      <br><br>
      <h4 id="paypal" style="text-align: center">Paypal</h4><br>
      <div id="paypalDiv" style="text-align: center">
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="JQM2KUC8VCKJA">
        <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
        <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
        </form>
        <br><br>
      </div>
    </div>
    <div id="donate" style="text-align: center">
      <div class="row">
      <br><br>
      <h4>Cryptocurrencies</h4>
      <br>
        <ul class="small-block-grid-1">
          <li class="rightPadding">
            <ul class="accordion" data-accordion="myAccordionGroup">
              <li class="accordion-navigation">
                <a href="#panel1c">Bitcoin</a>
                <div id="panel1c" class="content" style="font-size: .75rem">
                  1B2ySa1gSxMLU9cYnupZjWoC9YyAauS2AE
                </div>
              </li>
              <li class="accordion-navigation">
                <a href="#panel2c">Litecoin</a>
                <div id="panel2c" class="content" style="font-size: .75rem">
                  LQd2MbfMGGcF9zU343usG3wiTTT8eYwWk4
                </div>
              </li>
              <li class="accordion-navigation">
                <a href="#panel3c">Dogecoin</a>
                <div id="panel3c" class="content" style="font-size: .75rem">
                  D9rAukvfkxK7asAXUeJS1VJFqfGPfYwhqz
                </div>
              </li>
              <li class="accordion-navigation">
                <a href="#panel4c">NXT</a>
                <div id="panel4c" class="content" style="font-size: .75rem">
                  NXT-289P-PE36-KY6M-ELBLS
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      </div>
    </section>
<?php include('footer.php'); ?>
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Post your code, so we can look at it:)

ibbhfsmeaf
ibbhfsmeaf
4,568 Points

Added donate.php but I don't know if it'll be of much help.. I was more or less looking for someone who knows what can cause that sort of problem and maybe give me some prevention tips so I can see what I was doing wrong.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Okey alright, Can it have something to do with the header moving ti the right side, when scrolling down? that may cause this gap.

ibbhfsmeaf
ibbhfsmeaf
4,568 Points

I thought that too but the header code is consistent throughout all of the pages, plus it only does then when you scroll right first and THEN scroll down, so that action is probably just compensating for the fact that there is that white space because the js fixes the header to the screen.

1 Answer

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

I looked at your page and am not sure exactly why it's happening, but if you never have a reason to scroll horizontally, you can fix it fairly easily. In your css, add overflow-x: hidden; to your html and body elements.

Seems to do the trick.

Hope that helps!