Hello, guys! I am finishing my first project in Responsive Web Design course, and I am struggling to make my nav bar, picture and introduction text beside it responsive… I would highly appreciate your help. Thank you in advance.
Here is the link to the project:
Validate your HTML code here: The W3C Markup Validation Service
Remember, IDs are unique identifiers, meaning, you cannot have the same ID in more than one element.
Thank you for your response! I corrected all the errors indicated in the validator. However, it doesn’t solve my issue… I will try to do it by @media. Is there any other way, though?
The reason why your navbar is not responsive is because you are using
Instead you should use the flex-box properties.
Given that all the icons in the navbar are in the same side you should put them in a single div container.
Your title element and your icons container should be within the same container. Your nav-div is fine as it is. Then all you have to do separate the containers using flex-box properties. In this case, you could use
justify-content: space-around, or
Your HTML header element would end up looking something like this:
<a href="https://iohk.io/en/" target="_blank"> <img
src="https://i.postimg.cc/zDx6nsxQ/iconfinder-IOTA-2785463.png" alt="IOHK" id="h" class="iohk"> </a>
<a href="https://cardano.org/" target="_blank"> <img
src="https://i.postimg.cc/bJTHjjGf/iconfinder-cardano-ada-2844382.png" alt="Cardano" id="h"
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Charles_Hoskinson" target="_blank"><img id="h"
<a href="https://twitter.com/IOHK_Charles?s=20" target="_blank"><img id="h" class="tweet"
<div id="title" class="title">
<div id="nav-div" class="nav">
<a id="list" href="#title">Home</a>
<a id="list" href="#biography">Biography</a>
Then you would technically only need to use the
justify-content property on the
header-box to achieve the same positioning you had before only that this time it will be responsive.
Regarding the introduction text, it is responsive, however your margin is too big when you get to certain screen size. You would have to use media-queries to make the mid-section left margin smaller. That or declare the margin size as a percentage.
Same thing for the image, you would want either the height or the width of the image to be of X%.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.