Sapphire - Niambi P, Susi F, Lyuda K #35
Conversation
improve layout, add picture gallery, edit navigation bar, and edit footer.
| width: 100%; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| } |
There was a problem hiding this comment.
Your nav element is inside the header and the way it's styled keeps your navigation components from following the flexbox rules.
You might prefer what happens if you update your rules to rely on flexbox and styling the banner in the nav tag instead of adding spacing with the header or the a tags' rules:
.top-banner {
display: flex;
justify-content: space-evenly;
width: 100%;
padding: 2rem;
}
header {
height: unset;
}
.top-banner a {
margin: unset;
}| <section> | ||
| <h1> Everything You Need To Know About Bidets </h1> | ||
| <p> </p> | ||
| </section> |
There was a problem hiding this comment.
This section could be a header! 😄 Also, if you want spacing beneath the h1, you can use margin instead of an empty paragraph.
| max-width: 250px; | ||
| } | ||
|
|
||
| img: |
There was a problem hiding this comment.
Your other rules are being broken by this img:! You could remove it.
| img: |
| width: 600px; | ||
| padding: 10rem; | ||
| } | ||
| /* .cat-container { |
There was a problem hiding this comment.
It looks like you had an extremely frustrating time with the grid. 😞 I empathize deeply with that. It took me a lot of time to wrap my head around what grid was even trying to do and how to avoid all of the cumbersome grid-column-start and grid-column-end (etc.) rules. Good news: you can! Try out what happens if you remove your row and col divs and put back your cat-container-class section, using these CSS rules:
.cat-container {
background-color:#4ABDAC;
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 20px;
gap: 20px;
}
img {
max-width: 100%;
padding: unset;
}
body {
width: unset;
}You might need to re-order the cat imgs, but you get the grid it looks like you wanted with a lot less hassle.
I appreciate that you fought hard with this, and I hope that the experience helps you calibrate your sense of what level of frustration you ought to reach before looking for advice from more experienced devs. That will be really valuable in industry!
| <section> | ||
| <details class="accordion"> | ||
| <summary class="accordion-title">Misconceptions DEBUNKED</summary> | ||
| <p class="accordion-body"><ul> |
There was a problem hiding this comment.
In a bizarre turn of events, placing this ul inside this p makes the text invisible. I was able to get it to come back by removing the p and putting the class on the ul as you did above:
<ul class="accordion-body">| } | ||
|
|
||
| .top-banner a:hover{ | ||
| background-color:#f79833dc; |
There was a problem hiding this comment.
[nit] make sure you put in spaces 😄
| background-color:#f79833dc; | |
| background-color: #f79833dc; |
| <header> | ||
| <nav class="top-banner"> | ||
| <a href="index.html">Homepage</a> | ||
| <a href="gallery.html">Portraits of Bidets</a> | ||
| <a href="facts.html">Everything You Need To Know About Bidets</a> | ||
| </nav> | ||
| </header> |
There was a problem hiding this comment.
[nit] Make the spacing consistent. 😄
| <header> | |
| <nav class="top-banner"> | |
| <a href="index.html">Homepage</a> | |
| <a href="gallery.html">Portraits of Bidets</a> | |
| <a href="facts.html">Everything You Need To Know About Bidets</a> | |
| </nav> | |
| </header> | |
| <header> | |
| <nav class="top-banner"> | |
| <a href="index.html">Homepage</a> | |
| <a href="gallery.html">Portraits of Bidets</a> | |
| <a href="facts.html">Everything You Need To Know About Bidets</a> | |
| </nav> | |
| </header> |
No description provided.