Kevin Powell - Community•13mo ago

making a image responsive in a flexbox

I think I am going to pull my hair out. I have such a hard time making images respond how you want them to. Anyone know any good help videos or articles? here is my issue that I have.

<section class="hero">
        <div class="container row">
            <div class="hero_info">
                <h1 class="hero_title">I Really Need A Coffee</h1>
                <p>While I learn how to code, I am in the constant need for coffee to fuel my brain. All I need is one
                    coffee a day. Just click below! </p>
                <button class="hero_button">Buy Me A Cup!</button>
            </div>
            <div class="hero_image">
                <img src="./images/coffeman.jpg" alt="man drinking coffee">
            </div>
        </div>
    </section>

<section class="hero">
        <div class="container row">
            <div class="hero_info">
                <h1 class="hero_title">I Really Need A Coffee</h1>
                <p>While I learn how to code, I am in the constant need for coffee to fuel my brain. All I need is one
                    coffee a day. Just click below! </p>
                <button class="hero_button">Buy Me A Cup!</button>
            </div>
            <div class="hero_image">
                <img src="./images/coffeman.jpg" alt="man drinking coffee">
            </div>
        </div>
    </section>

hero {
    background-color: #1f2937;
}


.hero_info {
    font-size: 18px;
    color: #e5e7eb;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 16px;
    padding-right: 48px;
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100px;
}

.hero_title {
    font-size: 48px;
    font-weight: 800;
    color: #f9faf8;
}

.hero_image {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 250px;
    padding-top: 16px;
}

.hero_image>img {
    width: 100%;
    object-fit: cover;
}

.hero_button {
    padding: 16px 32px;
    color: white;
    background-color: #3882f6;
    border-radius: 15px;
    border-style: none;
    align-self: flex-start;
}

hero {
    background-color: #1f2937;
}


.hero_info {
    font-size: 18px;
    color: #e5e7eb;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 16px;
    padding-right: 48px;
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100px;
}

.hero_title {
    font-size: 48px;
    font-weight: 800;
    color: #f9faf8;
}

.hero_image {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 250px;
    padding-top: 16px;
}

.hero_image>img {
    width: 100%;
    object-fit: cover;
}

.hero_button {
    padding: 16px 32px;
    color: white;
    background-color: #3882f6;
    border-radius: 15px;
    border-style: none;
    align-self: flex-start;
}

7 Replies

Josh BeeShawOP•13mo ago

trying to get this look, the top and bottom evenly measure

Josh BeeShawOP•13mo ago

if I add a fixed height on the image at one point the image will reduce not evenly

Jochem•13mo ago

it'll really help if you can add a codepen or other live version that demonstrates the problem

Ian UK•13mo ago

looks like you're using bootstrap? That code looks like it'll match the second image if you have an image tall enough. https://codepen.io/brumgb/pen/YzBLQPR

Josh BeeShawOP•13mo ago

I can put in code pen but images dont transfer since I am using the free version I am using basic html and css. no bootstrap Also I am trying to mimic the first photo, the one with the red border around it. see how its perfectly flush with the top and bottom with the text and image

clevermissfox•13mo ago

KP had a ton of flexbox (and grid!) videos!! Please don’t put a fixed height! To start, A common image reset is img {max-width: 100%; display: block;} To get the look of the first screenshot is difficult because it’s a demo. They can make the rectangle that is the “image” to match the height of the text exactly. You can justify-content: center; so that the text and button is always central to the image. If you put a height on your image, make it a min-height or a max-height or it won’t be responsive You could also optimize your image in an editor to resize /crop it to start at the aspect ratio you want it to be. https://youtu.be/u044iM9xsWU?si=PIEQNoNXui5eoUVF https://youtu.be/s3wHkfMz8oE?si=zlqWjYEwMn0jO6cD

Kevin Powell

YouTube

Learn flexbox the easy way

🎓 I have a course dedicated to Flexbox! https://flexboxsimplified.com Get the flexbox properties cheatsheet here: https://kevin-powell.ck.page/25792a66b4 🔗 Links ✅ Navigation demo - starting point: https://codepen.io/kevinpowell/pen/JjrKmwy ✅ Navigation demo - ending point: https://codepen.io/kevinpowell/pen/oNGZRLO ✅ 3 columns demo - start...

Kevin Powell

YouTube

Two flexbox & grid behaviors most people don't know about

When we use flex and grid, there are a lot of things that we know are going to happen, like getting columns and whatnot, but a lot of people don't realize how it affects collapsing margins, and also what happens with things that aren't wrapped in elements as well! 🔗 Links ✅ Deeper look at how flex works: https://youtu.be/fm3dSg4cxRI ✅ More ...

clevermissfox•13mo ago

Websites are by default responsive. All the things we add to them makes them non-responsive. I wouldn’t start adding flex-grow without intending to. You also don’t need to declare flex-shrink: 1; as that is the default for flex-shrink. I would also recommend that if you have a div just to hold the image, you may as well use the image as a background image on that div instead and then fill the divs padding to achieve the height you want. In that case you’ll need background-size: cover. But I would have either the div with a bg image or take away that div and just have the image in the container. If you don’t want to optimize the image, maybe try using it as a background image instead.

Gaming

Programming

making a image responsive in a flexbox