Matty100
KPCKevin Powell - Community
•Created by Matty100 on 11/4/2023 in #front-end
Hello everyone! I thought there was a room for the CSS Class but I don't see it?
gap sounds perfect I will try that shortly. thanks!
17 replies
KPCKevin Powell - Community
•Created by Matty100 on 11/4/2023 in #front-end
Hello everyone! I thought there was a room for the CSS Class but I don't see it?
Ok here is the codepen. There are multiple flex displays that are not producing any results now. I think making a new class for the second UL might be the easiest way to get them both to respond but I'd love your help. Thank you!
https://codepen.io/Matthew-Steele/pen/BaMQrKz
17 replies
KPCKevin Powell - Community
•Created by Matty100 on 11/4/2023 in #front-end
Hello everyone! I thought there was a room for the CSS Class but I don't see it?
I thought I was nesting it but both children have the same class name. Could that be the issue?
17 replies
KPCKevin Powell - Community
•Created by Matty100 on 11/4/2023 in #front-end
Hello everyone! I thought there was a room for the CSS Class but I don't see it?
No idea how I missed that.. Thank you!!
17 replies
KPCKevin Powell - Community
•Created by Matty100 on 11/4/2023 in #front-end
Hello everyone! I thought there was a room for the CSS Class but I don't see it?
Conquering Responsive Layouts
17 replies
KPCKevin Powell - Community
•Created by Matty100 on 11/4/2023 in #front-end
Hello everyone! I thought there was a room for the CSS Class but I don't see it?
In Kevin's CSS Class we build a page with a navbar across the top. He splits the two sections of the navbar UL's with flexbox but uses margin to add space between the child elements. I wanted the navbar to be more responsive so I used flexbox to separate them but when I broke the UL into two sections like he does the flexbox stopped working on the children:
.nav {
display: flex;
justify-content: space-between;
}
separates the two sections of the navbar
I tried to add display flex to both the navlist and to the navitem and neither is putting space-between the elements anymore. Pretty sure it will work if I make them two individual lists instead of one list but do I need to do that??
<nav class="nav">
<ul class="navlist">
<li class="navitem"><a href="#" class="navlink">Home</a></li>
<li class="navitem"><a href="#" class="navlink">About</a></li>
<li class="navitem"><a href="#" class="navlink">Contact</a></li>
</ul>
<ul class="navlist">
<li class="navitem"><a href="#" class="navlink">Sign In</a></li> <li class="navitem"><a href="#" class="navlink nav__link--button">Sign up</a></li> </ul> </nav>
<li class="navitem"><a href="#" class="navlink">Sign In</a></li> <li class="navitem"><a href="#" class="navlink nav__link--button">Sign up</a></li> </ul> </nav>
17 replies