Search code examples
htmlcsscss-grid

Correcting Usage of Grid CSS Function for Responsive/Flexible Site Design

I am attempting to create a fairly responsive site, which ideally is laid out like so:

 | header header header header header |
 | blogtitle blogtitle blogtitle blogtitle blogtitle |
 | . blogpost blogpost blogpost . |
 | footer footer footer footer footer |

Essentially, the header, title, and footer are all able to use the full width of the screen, but the blogpost itself is constrained to the middle 3/5 of the screen (60%), with the possiblity of adding in sidebar information in the future in the unused space.

Most everything is displaying how I want it to except for the footer. I wanted to make sure that a.) the way I have it set up now is in fact how it mostly should be and will work in the future, and b.) that I correct the footer so it can display similarly to the header, with separate items on the left and center currently.

Additionally if there is a different approach that makes more sense, I would be happy to hear it, this is just what I came to reviewing several different approaches.

If you're able to help with this I'd be happy to send some money for your time, I realize this is a bit onerous.

I uploaded my files to FileBin which show my current guinea pig page and my stylesheet.

In case it displays differently, this is what I am currently seeing with my footer: Current footer

The background does not match up with the left nor bottom edge of the screen, and the items of text are stacked weirdly in a way I wouldn't expect. I would like them to be on a single line assuming there is horizontal space.

Ideally the header would stay at the top of the screen as you scroll down but the footer would remain at the bottom of all content, or the screen, whichever is longer.

Solution

  • I think that you were pretty close to getting what you wanted. The reason for this weird issue just comes down to how you were styling your body and html tags, as well as the grouping for the content in the footer.

    The background does not match up with the left nor bottom edge of the screen

    Fixed this by removing the margin from the html and body styles, and moving the background linear-gradient to the body. I also removed the background linear-gradient from the footer styles.

    html, body {
  margin: 0;
  min-height: 100vh;
  width: 100%;
}

/* Sets the background, center, covering screen, gradient from https://cssgradient.io/ */
body {
  font-family: Arial, Helvetica, sans-serif;
  background: rgb(195, 192, 255);
  background: linear-gradient(135deg, rgba(195, 192, 255, 1) 0%, rgba(255, 221, 176, 1) 50%, rgba(194, 245, 255, 1) 100%, rgba(164, 240, 255, 1) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

    ...items of text are stacked weirdly in a way I wouldn't expect

    You can fix this in a few ways, but I just added grid styling to the footer, and updated your subfooter class to have a grid-area: footer; prop. Also removed the inline styles from the p tags, and re-arranged the HTML grouping in the subfooter.

    /* Footer, idk */
.footer {
  grid-area: footer;
  font-family: Arial, Helvetica, sans-serif;
  background: transparent;
  background-blend-mode: normal;
  position: relative;
  height: 2.5rem;
  width: 100%;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto 20% 20% 20% auto;
  grid-template-areas:
    ". subfooter subfooter subfooter .";
}

.subfooter {
  grid-area: subfooter;
  color: black;
  text-decoration: none;
  font-size: 1.05rem;
  font-style: italic;

  /* Optional */
  display: flex;
  justify-content: space-between;
}


    <div class="footer">
  <div class="subfooter">
    Made by Jacob Sears <a href="#Home">Return to Top</a>
  </div>
</div>

    Finally I updated your page container styles to make sure the footer is always at the bottom regardless of how much content you have on the page. This is done by changing the grid-template-rows CSS value to include 1fr for the blogpost area

    .pagecontainer {
  min-height: 100vh;
  display: grid;
  grid-template-columns: auto 20% 20% 20% auto;
  grid-template-rows: auto auto 1fr auto;
  gap: 0px 0px;
  grid-template-areas:
    "header header header header header"
    "blogtitle blogtitle blogtitle blogtitle blogtitle"
    ". blogpost blogpost blogpost ."
    "footer footer footer footer footer";
}

    Here's a JS Fiddle with the updated code and a screenshot below of what your footer area looks like after the changes.

    enter image description here.

    Hope it helps!

    p.s. The comment by InSync is absolutely correct -- add code snippets in your post or link to reproductions in JS Fiddle, CodeSandbox, etc... instead of asking community members to download files.