Susy span columns not filling grid

StackOverflow https://stackoverflow.com/questions/21322377

  •  02-10-2022
  •  | 
  •  

Domanda

I am working with susy on my personal website, and I am running into a bizzarre issue where items are not actually filling all the way to the end of the last column they are supposed to span. I have turned the susy grid background on and put it up on my test server so that anyone who wants to can check it out here.

The left margin seems to be getting set correctly, but the width seems to get set just a little too short. The odd part about it is that there is a certain degree of consistency to it. For example, if I have the nav bar span two more columns as in the screenshot below, the nav bar and the main panel fall short by exactly the same amount, despite the fact that they are spanning different number of columns.

enter image description here

Below is some relevant HTML and Sass, but I really cannot tell what the issue is. I have tried all sorts of changes, but nothing seems to fix it.

<body>
<div class="page">
  <header>
    <a href="/"><div class="title">R<span class="title-kern">y</span>an Chipman</div></a>
    <nav>
      <a href="/about"><div class="nav-tab" id="nav-left"><p>About Me</p></div></a>
      <a href="/projects"><div class="nav-tab" id="nav-mid-left"><p>Projects</p></div></a>
      <a href="/interests"><div class="nav-tab" id="nav-mid-right"><p>Interests</p></div></a>
      <a href="/contact"><div class="nav-tab" id="nav-right"><p>Contact</p></div></a>
    </nav>
  </header>
  <div class="sidebar">
  </div>
  <%= yield %> <!-- main content panel here -->
  <footer class="footer">
  </footer>
</div>


.page {
    @include container($total-columns);
    @include susy-grid-background;
    background-color: $light-gray;
    padding-bottom: 2.5em;
    header {
        .title {
            @include span-columns(8, 16);
            @include push(4);
            font-size: $headline-font-size;
            clear: both;
            margin-bottom: .25em;
        }
        nav {
            @include span-columns(8, 16);
            @include push(4);
            background-color: $white;
            height: $nav-height;
            clear: both;
            .nav-tab {
                font-size: $nav-tab-font-size;
                height: $nav-height;
                @include with-grid-settings(4,25%,0%,0%) {
                    @include span-columns(1, 4);
                }
                &#nav-left {
                    background-color: $blue;
                }
                &#nav-mid-left {
                    background-color: $green;
                }
                &#nav-mid-right {
                    background-color: $orange;
                }
                &#nav-right {
                    background-color: $red;
                }
                &:hover {
                    height: $nav-hover-height;
                    @include opacity(.75);
                }
                p {
                    padding-top: 12%;
                }
            }
        }
    }
    #main {
        @include span-columns(12,16);
        @include push(2);
        @include content-box;
        h1, h2, h3 {
            clear: both;
    }
}
È stato utile?

Soluzione

If you re-size your browser, the background image will jump and occasionally line up. This is consistent because it is not a problem with your column spans, but with browser handling of background images. As the docs note, the grid image is not reliable for exact measurements, for this exact reason.

It all depends on the math being precise, so the browser doesn't have to do any rounding. Browsers do a terrible job with sub-pixel rounding on background images, and I've never seen any reliable workarounds.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top