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:

https://codepen.io/andrei29428637/pen/RwKRPRY

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="https://iohk.io/en/" target="_blank"> <img
                            src="https://i.postimg.cc/zDx6nsxQ/iconfinder-IOTA-2785463.png" alt="IOHK" id="h" class="iohk"> </a>
                </div>
        
                <div id="cardano">
                    <a href="https://cardano.org/" target="_blank"> <img
                            src="https://i.postimg.cc/bJTHjjGf/iconfinder-cardano-ada-2844382.png" alt="Cardano" id="h"
                            class="cardi"> </a>
                </div>
        
                <div id="wiki">
                    <a id="tribute-link" href="https://en.wikipedia.org/wiki/Charles_Hoskinson" target="_blank"><img id="h"
                            class="wikipedea" src="https://i.postimg.cc/xTDBYPNg/iconfinder-wikipedia-3069748.png"
                            alt="wikipedea"> </a>
                </div>
        
                <div id="tweeter">
                    <a href="https://twitter.com/IOHK_Charles?s=20" target="_blank"><img id="h" class="tweet"
                            src="https://i.postimg.cc/brbMkZWQ/iconfinder-Circled-Twitter-svg-5279123.png" alt="twitter"></a>
                </div>
            </div>
    
    
            <div id="title" class="title">
                <h1>Charles Hoskinson</h1>
            </div>
        </div>


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

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

                    <li class="biography">
                        <a id="list" href="#biography">Biography</a>
                    </li>

                </ul>
            </nav>
        </div>

    </header>

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.