Search code examples
csscss-gridgrid-layout

Content won't move to assigned grid areas

I have a 2-column grid, and I'm trying to put my in the left column, and the (#footer-info) text in the right column. I have assigned grid-areas, but they won't move to their respective columns. Both the h1 and article are stuck on top of each other in the left column.

Text is all stacked on top in the left column, I want to move the below text to the right (indicated in red)

footer {
  background-color: $navy;
  color: $white;
  text-align: center;
  >div {
    position: relative;
    @include md {
      display: grid;
      grid-template-columns: 50% auto;
      grid-template-areas: "glazetitle location";
    }
    section {
      position: relative;
      z-index: 20;
      h1 {
        font-family: 'Caveat', cursive;
        font-size: rem-calc(35);
        font-weight: 700;
        color: $white;
        z-index: 1;
        @include md {
          grid-area: glazetitle;
        }
      }
      #footer-info {
        @include md {
          grid-area: location;
        }
        p {
          font-family: 'Padauk', sans-serif;
          font-size: rem-calc(16);
          line-height: rem-calc(22);
          color: $white;
        }
        ul {
          display: flex;
          justify-content: center;
          padding: 15px 0px;
          li {
            margin: 0px 10px;
            a:link,
            a:visited {
              color: $white;
              &:hover,
              &:active {
                color: $gray;
              }
            }
          }
        }
      }
    }
    #footer-scribble {
      background-image: url('../img/Footer/footer-scribbles.svg');
      height: 300px;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 0;
      width: 120%;
      z-index: 10;
      margin-left: -200px;
      @include md {
        width: 100%;
        height: 250px;
        margin-left: -150px;
      }
    }
  }
}
<footer class="grid-container content-spacing subhead-spacing">
  <div>
    <section>

      <h1>Glaze Studio</h1>

      <article id="footer-info">
        <p>1488 Lunetta Street<br> Philadelphia, PA 19106</p>

        <ul>
          <li><a href="https://twitter.com/explore" target="_blank"><i class="fab fa-twitter"></i></a></li>
          <li><a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-square"></i></a>
          </li>
          <li><a href="https://www.instagram.com/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a>
          </li>
          <li><a href="https://www.youtube.com" target="_blank"><i class="fab fa-youtube"></i></a></li>
        </ul>

        <p>215-925-3453<br> info@glazestudio.org
          <br> Icons: icons8.com</p>
      </article>

    </section>

    <aside id="footer-scribble"></aside>
  </div>

</footer>

Please let me know if I need to supply more info, I'm still new to this platform. **Also the address/phone number are phony! No worries.

Solution

  • A couple of things I have noticed.

    1. You defined a grid-template-areas: "glazetitle location" in a medium breakpoint, but then never assigned them to there respected tags. In this case, it would be your section tag and your aside tag at the medium breakpoint size.
    2. Why is the div directly inside of the footer tag set to relative. A follow-up question would be why is the aside tag set to an absolute position?

    I would say fix those 2 issues first and this might then solve your overall grid problems.