htmlcssgoogle-web-designer

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

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?**

Solution 

  • #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 class="party-image-wrapper">
            <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 class="party-image-wrapper">
            <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 class="party-image-wrapper">
            <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