How to balance my image (and text) inside div and both must remains responsive-CodePudding

I am a super beginner in HTML and CSS. It was actually aligned and balanced until I put text inside each three divs and photos become like this, unbalanced even I use the same width and height:

These are the codes:

#wrapper{
 display:flex;
 width: 100%;
 justify-content: space-around;
 }
 
 .party{
 display:inline-flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-around;
 padding: 2%;
 
 }
 
 .party img{
 border: solid black 2px;
 padding: 0.3%;
 margin: 2%;
 max-width: 100%;
 max-height: 100%;
 }
 input[type = button] {
 background-color: black;
 padding: 10px 20px;
 color: white;
 margin: 2px 1px;
 cursor: pointer;
 }

<div id="wrapper">
<div class = "party">
<img src = "Images/birthday_1.jpg">
<h3 style = "font-size: 2vw;">Party Events</h3>
<p style = "font-size: 1.5vw;"> Want flower decoration for your birthday, ceremonies, baby showers and any party events? Consult to our florist now!</p>
<input type = "button" value = " Shop Now "/>
</div>
<div class ="party">
<img src = "Images/wedding_1.jpg">
<h3 style = "font-size: 2vw;"> Wedding Events </h3>
<p style = "font-size: 1.5vw;">We offer free consultation for a bride-to-be. Call our store to make an appointment on <b> 64 85459 3943</b></p>
<input type = "button" value = " Shop Now "/>
</div>
<div class = "party">
<img src = "Images/sympathy.jpg">
<h3 style = "font-size: 2vw;">Sympathy</h3>
<center><p style = "font-size: 1.5vw;"> Fresh flowers that express heartfelt thoughts and sincere condolences. Talk to our dedicated team by phone or come in to meet with our flourist in a private consultation.</p></center>
<input type = "button" value = " Shop Now "/>
</div>
</div>

This is my ideal result:

** What should I do? Any recommendations?**

CodePudding user response：

#wrapper{
    display:flex;
    width: 100%;
    justify-content: space-around;
}
.party{
    display:inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 2%;
    width: 33.33%;
}
.party-image-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    border: solid black 2px;
    padding: 0.3%;
    padding-top: 100%;
    margin: 2%;
    max-width: 100%;
    max-height: 100%;
}
.party img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
input[type = button] {
    background-color: black;
    padding: 10px 20px;
    color: white;
    margin: 2px 1px;
    cursor: pointer;
}

<div id="wrapper">
    <div class = "party">
        <div >
            <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg">
        </div>
        <h3 style = "font-size: 2vw;">Party Events</h3>
        <p style = "font-size: 1.5vw;"> Want flower decoration for your birthday, ceremonies, baby showers and any party events? Consult to our florist now!</p>
        <input type = "button" value = " Shop Now "/>
    </div>
    <div class ="party">
        <div >
            <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg">
        </div>
        <h3 style = "font-size: 2vw;"> Wedding Events </h3>
        <p style = "font-size: 1.5vw;">We offer free consultation for a bride-to-be. Call our store to make an appointment on <b> 64 85459 3943</b></p>
        <input type = "button" value = " Shop Now "/>
    </div>
    <div class = "party">
        <div >
            <img src = "https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=49ed3252c0b2ffb49cf8b508892e452d">
        </div>
        <h3 style = "font-size: 2vw;">Sympathy</h3>
        <center>
            <p style = "font-size: 1.5vw;"> Fresh flowers that express heartfelt thoughts and sincere condolences. Talk to our dedicated team by phone or come in to meet with our flourist in a private consultation.</p>
        </center>
        <input type = "button" value = " Shop Now "/>
    </div>
</div>

When using flex to put elements on the same row the default behavior is for the elements to adapt to their content's width. To fix this you can simply set a width of each element, I chose 33.33% because we have 3 elements, so 100 / 3 = 33.33.

As for the images, there's a trick to lock them to a responsive square regardless of the image size or ratio, you need to put the image into a container, set the container's height to 0 and the padding-top (or bottom) to 100%, since the percentage is based on it's width it will make the container a perfect square.

Once you have that square you can use position: absolute; on the image itself to position it relative to the container, and then use object-fit: cover, which basically tells the browser to always fill the container with a given element. it's a bit complicated but I hope it makes sense, you said you're still a beginner so don't worry if it's not super clear for now, you'll get to it eventually. If you have other questions drop them in the comments

CodePudding user response：

First of all, the reason that the boxes resize like that is that they are part of a flexbox layout, and the default is for them to grow/shrink with their contents. There are ways to adjust this, but in your case, it sounds like you want all 3 boxes to have an equal width.

If you know you will only have 3 party boxes, then don't rely on flexbox for the widths, and just do this:

.party {
    display:inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 2%;
    width: 33.33%;
    box-sizing: border-box;
}

If you'd prefer to keep the flexbox, you can instead use flex-basis: 33.33% instead of width: 33.33%.