CODEWITHSUNDEEP
htmlcssflexbox
brownmamba
brownmamba

Reputation: 173

Image not acting "responsive" using flexbox?

I am pretty new to HTML/CSS and have begun trying to learn CSS flexbox layout. Just working on a simple site recreation from scratch using flexbox.

In full screen, the image positioning on the logo looks good. However, when shifting around the screen size, my nav bar on the right side responds but the logo image on the left does not. I believe I have set it up correctly though.

.header-container {
 display: flex;
 width: 100%;
 height: 150px;
 align-items: center;
 justify-content: space-between;
 }


.header-container .logo .sb{
 display: flex;
 justify-content: flex-start;
 width: 60%;
 position: relative;
 left: 50px;
 padding: 20px;
 }

Here's a link to my work as well: https://codepen.io/gkunthara/pen/VWdrYj

What exactly am I doing wrong? Any tips on the type of positioning I'm doing with flexbox or with flexbox, in general, are appreciated!

Upvotes: 0

Views: 641

Answers (2)

Sumit M
Sumit M

Reputation: 650

Remove position on nav & set max-width: 100% on logo image.

https://codepen.io/thesumit67/pen/bRKYLx?editors=1100

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

Remove Position

.header-container .nav-bar-container {
    display: flex;
    /*position: absolute;*/
    /*right: 100px;*/
}

Upvotes: 2

Related Questions