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.
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 position: relative
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-between, justify-content: space-around, or justify-content: space-evenly.
Your HTML header element would end up looking something like this:
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%.