Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Mayur Pande
PLUS
Mayur Pande
Courses Plus Student 11,711 Points
Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Having responsive images for header

I have an image/logo that is going to be in the header. However it was around 2000px * 2000px so I made it smaller to around 500px. But in mobile view there was an overflow.

I am using flexbox, is there a way to make this image responsive?

This is what I have done so far;

<div id="header">
  <div id="header-item">
    <img src="img/russell.jpg" alt="temp-logo" />
  </div>
</div>


    #header{
       display:flex;
       align-items:center;
       justify-content:center;

    }
Asaad Khattab
Asaad Khattab
38,100 Points
Asaad Khattab
Asaad Khattab
38,100 Points 
<div id="header">
  <div id="header-item">
  </div>
</div>

#header {
  background-image: url('../img/russell.jpg');
  background-repeat:no-repeat;
  background-size: cover;
  overflow: hidden;
  top: center;
  width: 100%;
  height: 2000px;
  display: inline-block;
  margin; 0 auto;
}
  ```html
https://teamtreehouse.com/library/introduction-to-html-and-css

1 Answer

justdave
justdave
31,518 Points

You totally can do that. First we need to set the flex property on #header-item, then set #header-item img width to 100%

#header {
    display: flex;
    align-items: center;
    justify-content: center;
}

#header-item {
  flex: 1 1 auto;
}

#header-item img {
  width:100%;
}
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

thanks do you mind explaining the flex: 1 1 auto part as it works well in mobile view, but when in pc view I have to set it to none for it to display nicely

justdave
justdave
31,518 Points

the flex property is shorthand for flex-grow, flex-shrink, flex-basis. Guil is fantastic and explains that in the flexbox course far better than I could, I suggest you just watch that section. I did quickly test that code on jsfiddle, so I know it does in fact work and mobile screen sizes. I'd say there is something else going on if it's not working for you, a typo or some other CSS. In your code there are only two flex elements, the #header is a flex container, and #header-item is a flex item. You can treat the img as a normal responsive image in this case, nothing to do with flexbox.