Search code examples
csscanvaswrappercenter

Why does my content shift when I reload the page?

So my site is locked at the top of the browser which is correct, however when I hit reload (command + R) on this gallery page it now vertically centers everything which is not what I want. It's a template based site (squarespace) with stuff I have added.

I added this css:

#canvas { top: 0 !important; margin-top: 0 !important;}

and this HTML

<script type="text/javascript">
window.onload=function(){
document.getElementById('canvas').removeAttribute('id');
document.getElementById('canvasWrapper').removeAttribute('id');}; </script>

enter image description here

enter image description here

Solution

  • When you first load the page, you have a div (with ID something like "yui_3_10_1_1_1376940471763_412") that has no inline styling. So everything looks fine.

    When you reload the page, that div no longer has an ID, and instead has an inline top margin added to it, apparently by Javascript, which pushes your site down.

    Meanwhile, your code makes no sense. You've applied CSS to the div with id="canvas", and then used Javascript to remove that id, giving your CSS nothing to apply to.

    Having removed that, your page is also throwing a JS error because a SquareSpace function in site.js is looking for the IDs you've deleted.

    I'd try removing your added JS (leaving "canvas" and "canvas-wrapper" intact). Your CSS (with the "!important" tags) should override any inline styling that SquareSpace adds.