Currently, I am in the process of making my website responsive. This involves ensuring that the navigation bar moves along with the screen when resized. I am working on getting the CSS to wrap to the next line when the browser is resized.
* {
padding: 0px;
margin: 0px;
}
html {
width: 100%;
height: 100%;
}
#head {
margin-top: .5%;
width: 87%;
margin-left: 6.5%;
height: 120px;
background-color: rgb(241, 181, 0);
}
...
<footer {
margin-top: 5px;
background-color: rgb(187, 187, 187);
text-align: center;
width: 87%;
font-size: 26px;
margin-left: 6.5%;
margin-bottom: .5%;
height: auto;
}
@media (max-width: 1666px) {
#nav {
height: 10%;
}
...
If you look closely, the navigation text overflows out of the navigational bar if it's not fully visible. It should break and move below the other links on the website. This issue needs to be resolved as part of an ongoing assignment where we are required to create a responsive website. Any assistance or suggestions would be greatly appreciated! Thank you.