Html Question posted in
Some basic documentation can be found here.

Html – I am not able to increase the width of my flexbox. I am new to web development… Please use normal terms when answering… Thank you

Problem
I want to bigger width for my flex images. It is shrinked up and I cannot understand why i cannot increase the width of it.

        display:flex;
        max-width:95%;
        width:95%;
        margin:auto;
        background-color: #052F1A;
        gap:10px;
       
    }

   
    .bowl_images_section_1{
        display: flex;
        background-image: url(./images/piece-1.jpg);
        background-size:contain;
        width:100%;
        height:400px;
        background-position: 0% 0%;
  background-size: 100% 100%;

    }
    .bowl_images p{
        display: flex;
        font-size:12px;
        background-color: #FF72B5;
        color:#052F1A;
        padding:3px;
        margin:auto;
        border-radius: 3px;
        text-wrap: wrap;
    }

HTML Code… I have used flexbox and want a bigger width for each flex child.

        <div class="bowl_images_section_1"> <p>Original Pieces</p> </div>
        <div class="bowl_images_section_1"> <p>Original Pieces</p> </div>
        <div class="bowl_images_section_1"> <p>Original Pieces</p> </div>
        <div class="bowl_images_section_1"> <p>Original Pieces</p> </div>
        <div class="bowl_images_section_1"> <p>Original Pieces</p> </div>
        <div class="bowl_images_section_1"> <p>Original Pieces</p> </div>
        <div class="bowl_images_section_1"> <p>Original Pieces</p> </div>
        <div class="bowl_images_section_1"> <p>Original Pieces</p> </div>
        <div class="bowl_images_section_1"> <p>Original Pieces</p> </div>
        <div class="bowl_images_section_1"> <p>Original Pieces</p> </div>
        <div class="bowl_images_section_1"> <p>Original Pieces</p> </div>
        <div class="bowl_images_section_1"> <p>Original Pieces</p> </div>
        </div>
Tags:

2

Answers


  1. 0

    Hear, you can add the max-width to the child element as per you need the child width. I add the flex-wrap:wrap property to the flexible items should wrap. When your child’s size does not get enough space to move from one row to the next row.

    .bowl_images_main_section {
    display: flex;
    flex-wrap: wrap;
    max-width: 95%;
    width: 95%;
    margin: auto;
    background-color: #052F1A;
    gap: 10px;
}


.bowl_images_section_1 {
    display: flex;
    background-image: url('https://picsum.photos/200/300');
    width: 100%;
    max-width: 225px;  /* Here you change max-width value as you need */
    height: 400px;
    background-position: 0% 0%;
    background-size: 100% 100%;

}

.bowl_images p {
    display: flex;
    font-size: 12px;
    background-color: #FF72B5;
    color: #052F1A;
    padding: 3px;
    margin: auto;
    border-radius: 3px;
    text-wrap: wrap;
}
    <div class="bowl_images_main_section">
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    You are almost there. You don’t need to flex property on each element. The main and the child could have flex property while p tag does not need.

    I have made few changes to make it look proper.

    .bowl_images_main_section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 95%;
    width: 95%;
    margin: auto;
    background-color: #052F1A;
    gap: 16px;
    text-align: center;
    padding: 16px;
}


.bowl_images_section_1 {
    background-image: url(https://placehold.co/300x250);
    width: 100%;
    max-width: 250px;  /* Here you change max-width value as you need */
    height: 250px;
    background-position: center bottom;
    background-size: cover;
    border: 1px solid #FFF;
}

.bowl_images_section_1 p {
    font-size: 12px;
    background-color: #FF72B5;
    color: #052F1A;
    padding: 3px;
    margin: auto;
    border-radius: 3px;
    text-wrap: wrap;
    border: 1px solid #F00;
}
    <div class="bowl_images_main_section">
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
    <div class="bowl_images_section_1">
        <p>Original Pieces</p>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search