Walt Whitman Tribute page help/feedback

Code Feedback
1

Trying to figure out how to flex or grid my tribute page’s nav menu and the rest of it so that the nav menu doesn’t cover a portion of the page. I assume my page could have been coded simpler, but, alas, I am new. any help would be appreciated.

2

Think your css code should look like:

.bodyDiv {
  display: flex;
}
.ulDiv {
  flex-basis: 20%;
  position: fixed;
}
.mainDiv {
  flex-basis: 80%;
  margin-left: 25%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  height: 100%;
  overflow: auto;
}
3

Thank you for the help! I’ll check it out and see

4

Your image is huge (6 MB) pick one of the smaller versions provided.

I would suggest switching the menu on small screen sizes, you end up with a lot of wasted space on the left side and it ends up overlapping the content. Maybe just switch to a normal top style nav on small screens.

Is there a reason why you are setting your font size in points (pt) ?


https://www.w3.org/Style/Examples/007/units.en.html

5

Thanks for your reply! I’m using point out of habit for font; thank you for the resource. Would moving the menu for smaller sizes require a media query?

6

Yes, it would. The changes to the layout would have to take place inside media queries.