Skip to main content
R
racephotoman
Participating Frequently
February 24, 2024
Question

PAGE SHIFT ALIGNMENT

  • February 24, 2024
  • 3 replies
  • 256 views

Minor alignment issue driving me crazy.

Site: www.septmeber8th.com

Along the top gray box I have links to six pages (including the home main page).

 Clicking the MAIN PAGE, TRAVEL, RACING and MISC IMAGES link, the pages all seem to open and line up the same, but if you click the MARKETPLACE and CONTACT link, the pages open and seem to shift slighly to the right. The code for all the pages look identical (unless the obvious right in front of your nose error. Again no big deal, but I see it!

Walter 

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 25, 2024

    SHORT ANSWER:  Browser scoll bars take up space on long pages.   They don't appear on short pages.

     

    There is a work around for keeping footers locked to the bottom of screen on long & short pages but it requires valid code.

    Fix your code errors first.

    https://validator.w3.org/

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 25, 2024

     

    Copy & paste this into a new blank document.

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Flexbox Footer at Bottom</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin:0;
min-height: 100vh;
display: flex;
flex-direction: column;
}

main {display:flex;width:95%;}

.col {padding:0 2%; }

.flex1 {width:25%}

.light {background:#DDD;}

.dark {background:#222; color:#FFF}

/**OPTIONAL FOOTER AT SCREEN BOTTOM**/
footer {margin-top:auto}

/* Special Rules for mobiles */
@media only screen and (max-width: 800px) {
main {flex-wrap: wrap}
}

</style>
</head>
<body>
<nav class="dark">
<p>Navigation here</p>
</nav>

<header>
<h1>Hello World</h1>
</header>

<main>
<div class="col light flex1">
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
</div>
<div class="col">
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. </p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>

<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>

<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
</div>
<div class="col light flex1">
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. </p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. </p>
</div>
</main>

<footer class="dark">
<p>Footer goes here</p>
</footer>

</body>
</html>

     

    Nancy O'Shea— Product User & Community Expert
      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      February 25, 2024

      Adding to @osgood_'s reply, the shift that you are seeing is normal behaviour. 

       

      The shift that you are not seeing (e.g. homepage) and which is far more important!

      See here for more.

       

      Also, make sure that the pages have a meta description and a meta viewport as in 

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="My page description">

       

      There are many more problems, like no headings and no aria attributes. If you questions, please Google first before coming back here.

       

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      O
      osgood_
      Legend
      February 24, 2024

      'Contact' and 'Marketplace' are pages where the content (because it's short) do NOT evoke a vertical browser scroll bar, whilst the other pages evoke a scroll bar because they have more content. The page shift you see is as a result of the browser not having to, or having to, allocate room for the vertical scrollbar.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices