Tribute Page Proyecto

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:

1 Like

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?

1 Like

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:

    <header class="header-box">
        <div class="header-box__left-side">
            <div class="icons-container">
                <div id="IOHK">
                    <a href="" target="_blank"> <img
                            src="" alt="IOHK" id="h" class="iohk"> </a>
                <div id="cardano">
                    <a href="" target="_blank"> <img
                            src="" alt="Cardano" id="h"
                            class="cardi"> </a>
                <div id="wiki">
                    <a id="tribute-link" href="" target="_blank"><img id="h"
                            class="wikipedea" src=""
                            alt="wikipedea"> </a>
                <div id="tweeter">
                    <a href="" target="_blank"><img id="h" class="tweet"
                            src="" alt="twitter"></a>
            <div id="title" class="title">
                <h1>Charles Hoskinson</h1>

        <div id="nav-div" class="nav">
                <ul id="navi">

                    <li id="home">
                        <a id="list" href="#title">Home</a>

                    <li class="biography">
                        <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.

1 Like

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%.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.