Hi!
Here is the project I’m working on
I can’t figure out why I cannot make the logo appear wrap together with the other 3 links.
Can anyone help me out? I’ve been stuck for hours!
Hi!
Here is the project I’m working on
I can’t figure out why I cannot make the logo appear wrap together with the other 3 links.
Can anyone help me out? I’ve been stuck for hours!
You are missing #navbar styling outside of media query for screens with a width of more than 650px.
Try adding the below:
#nav-bar {
margin-top: 10px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
text-align: center;
padding: 0 50px;
}
Hi @narmada_nannaka! Thanks for taking a look.
I’ve tried your solution but my logo still does not join the links as one column.
@hassanuddinishak - Your links are within one div and your logo is on another. Both of these are within a header.
I am assuming you want all four of them to be displayed in a column when the screen size is less than 650px.
Try adding header to the media query and update flex-direction to column. For example:
@media (max-width: 650px) {
#header {
flex-direction: column
}
…
}