skip to Main Content

this is a picture of the issue I am currently coding a website for a client. This is a portfolio website to showcase their photography and im running into an issue with my layout. I have one div as my parent with the class of row on it then i have my picture elements wrapped in divs with the column class. The issue i seem to be running into is that the browser/HTML thinks my divs are bigger than they are and it is creating white space in between the columns. I have found one work around be it requires me to change the height of my images to 16% and have the object-fit set to cover but now the images are cut off and all the same size square. I was hoping somebody could point me in the right direction to get my divs to not add so much white space. i will provide my code and an image of the issue below.

  <div class="row">
            <div class="column">
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/bill-ironstand-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/bill-ironstand-xs.webp">
                    <img src="img-portrait/bill-ironstand.webp" alt="Portrait of Bill Ironstand">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/christmas-day-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/christmas-day-xs.webp">
                    <img src="img-portrait/christmas-day.webp" alt="Portrait of a baby on christmas day">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/business-woman-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/business-woman-xs.webp">
                    <img src="img-portrait/business-woman.webp" alt="Portrait of a business woman">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/richardson-family-photo-3-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/richardson-family-photo-3-xs.webp">
                    <img src="img-portrait/richardson-family-photo-3.webp" alt="Family Portrait of the Richardsons">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/sydney-boyce-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/sydney-boyce-xs.webp">
                    <img src="img-portrait/sydney-boyce.webp" alt="Portrait of Syney Boyce">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/yellow-mits-front-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/yellow-mits-front-xs.webp">
                    <img src="img-portrait/yellow-mits-front.webp" alt="Portrait of man with yellow mits">
                </picture>
            </div>
            <div class="column">
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/adrielle-aquino-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/adrielle-aquino-xs.webp">
                    <img src="img-portrait/adrielle-aquino.webp" alt="Portrait of Adrielle Aquino">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/alexa-broen-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/alexa-broen-xs.webp">
                    <img src="img-portrait/alexa-broen.webp" alt="Portrait of Alexa Broen">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/amie-doucette-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/amie-doucette-xs.webp">
                    <img src="img-portrait/amie-doucette.webp" alt="Portait of Amie Doucette">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/andrea-klapstein-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/andrea-klapstein-xs.webp">
                    <img src="img-portrait/andrea-klapstein.webp" alt="Portait of Andrea Klapstein">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/band-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/band-xs.webp">
                    <img src="img-portrait/band.webp" alt="Portait of a Band">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/bill-ironstand-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/bill-ironstand-xs.webp">
                    <img src="img-portrait/bill-ironstand.webp" alt="Second portait of Bill Ironstand">
                </picture>
            </div>
            <div class="column">
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/blazer-woman-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/blazer-woman-xs.webp">
                    <img src="img-portrait/blazer-woman.webp" alt="Portait of a woman with a blazer">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/blue-suit-2-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/blue-suit-2-xs.webp">
                    <img src="img-portrait/blue-suit-2.webp" alt="Portait of man in blue suit">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/blue-suit-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/blue-suit-xs.webp">
                    <img src="img-portrait/blue-suit.webp" alt="Close up portait of man in blue suit">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/christmas-fam-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/christmas-fam-xs.webp">
                    <img src="img-portrait/christmas-fam.webp" alt="Portait of a family on christmas day">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/couple-hug-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/couple-hug-xs.webp">
                    <img src="img-portrait/couple-hug.webp" alt="Portait of a couple embracing">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/couple-pink-front-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/couple-pink-front-xs.webp">
                    <img src="img-portrait/couple-pink-front.webp" alt="Portait of a couple">
                </picture>
            </div>
            <div class="column">
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/curly-hair-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/curly-hair-xs.webp">
                    <img src="img-portrait/curly-hair.webp" alt="Portait of a woman with curly hair">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/dree-beaudry-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/dree-beaudry-xs.webp">
                    <img src="img-portrait/dree-beaudry.webp" alt="Portait of Dree Beaudry">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/driver-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/driver-xs.webp">
                    <img src="img-portrait/driver.webp" alt="Portrait of a Driver">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/evan-oliver-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/evan-oliver-xs.webp">
                    <img src="img-portrait/evan-oliver.webp" alt="Portrait of Evan Oliver">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/family-portait-2-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/family-portait-2-xs.webp">
                    <img src="img-portrait/family-portait-2.webp" alt="Second Family Portrait">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/family-portait-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/family-portait-xs.webp">
                    <img src="img-portrait/family-portait.webp" alt="Third Family Portrait">
                </picture>
            </div>
            <div class="column">
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/henry-deng-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/henry-deng-xs.webp">
                    <img src="img-portrait/henry-deng.webp" alt="Portrait of Henry Deng">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/hilary-meng-2-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/hilary-meng-2-xs.webp">
                    <img src="img-portrait/hilary-meng-2.webp" alt="Portrait of Hilary Meng">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/hilary-meng-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/hilary-meng-xs.webp">
                    <img src="img-portrait/hilary-meng.webp" alt="Second portrait of Hilary Meng">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/joel-rf-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/joel-rf-xs.webp">
                    <img src="img-portrait/joel-rf.webp" alt="Portrait of Joel">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/lisa-bains-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/lisa-bains-xs.webp">
                    <img src="img-portrait/lisa-bains.webp" alt="Portrait of Lisa Bains">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/man-dog-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/man-dog-xs.webp">
                    <img src="img-portrait/man-dog.webp" alt="Portrait of a man and his dog">
                </picture>
            </div>
            <div class="column">
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/man-green-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/man-green-xs.webp">
                    <img src="img-portrait/man-green.webp" alt="portrait of a man in a green sweatshirt">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/man-zip-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/man-zip-xs.webp">
                    <img src="img-portrait/man-zip.webp" alt="Portrait of a man in a zip up jacket">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/mayra-chavez-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/mayra-chavez-xs.webp">
                    <img src="img-portrait/mayra-chavez.webp" alt="Portrait of Mayra Chavez">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/nakai-2-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/nakai-2-xs.webp">
                    <img src="img-portrait/nakai-2.webp" alt="Portrait of Nakai">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/nakai-bumper-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/nakai-bumper-xs.webp">
                    <img src="img-portrait/nakai-bumper.webp" alt="Portrait of Nakai">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/nakai-close-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/nakai-close-xs.webp">
                    <img src="img-portrait/nakai-close.webp" alt="Portrait of Nakai">
                </picture>
            </div>
            <div class="column">
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/nakai-light-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/nakai-light-xs.webp">
                    <img src="img-portrait/nakai-light.webp" alt="Portrait of Nakai">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/nakai-mask-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/nakai-mask-xs.webp">
                    <img src="img-portrait/nakai-mask.webp" alt="Portrait of Nakai">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/nakai-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/nakai-xs.webp">
                    <img src="img-portrait/nakai.webp" alt="Portrait of Nakai">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/richardson-family-photo-2-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/richardson-family-photo-2-xs.webp">
                    <img src="img-portrait/richardson-family-photo-2.webp" alt="richardson family portrait">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/richardson-family-photo-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/richardson-family-photo-xs.webp">
                    <img src="img-portrait/richardson-family-photo.webp" alt="richardson family portrait">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/senuda-sydney-2-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/senuda-sydney-2-xs.webp">
                    <img src="img-portrait/senuda-sydney-2.webp" alt="portrait of Sydney Senuda">
                </picture>
            </div>
            <div class="column">
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/senuda-sydney-md.webp alt=">
                    <source media="(min-width: 320px)" srcset="img-portrait/senuda-sydney-xs.webp">
                    <img src="img-portrait/senuda-sydney.webp" alt="portrait of Sydney and Senuda">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/senuda-wettasinghe-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/senuda-wettasinghe-xs.webp">
                    <img src="img-portrait/senuda-wettasinghe.webp" alt="portrait of Sydney and Senuda">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/singer-2-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/singer-2-xs.webp">
                    <img src="img-portrait/singer-2.webp" alt="portrait of a singer">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/singer-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/singer-xs.webp">
                    <img src="img-portrait/singer.webp" alt="portrait of a singer">
                </picture>
                <picture>
                    <source media="(min-width: 600px)" srcset="img-portrait/yellow-mits-md.webp">
                    <source media="(min-width: 320px)" srcset="img-portrait/yellow-mits-xs.webp">
                    <img src="img-portrait/yellow-mits.webp" alt="Portrait of a man with yellow mits">
                </picture>

            </div>

        </div>
.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

.column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
    max-height: 50%;
}

.column picture {
    margin-top: 1rem;
}

.column img {
    width: 100%;
    object-fit: cover;
    height: 16%;
    display: block;
    margin-bottom: 1rem;
}

/* Media queries for responsiveness */
@media screen and (max-width: 760px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

@media screen and (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
}

this is my CSS and HTML currently i have the object-fit:cover and the height:16% this is the way i was able to work around it but it crops the images and makes them all the same size. I want to avoid doing that

2

Answers


  1. I think your issue comes with the padding value "column class":

    .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
    max-height: 50%;}
    

    You are assigning 4 pixels both to left and right padding. (Take into account that when you only provide 2 values, the first one is assigned to both top and bottom padding, and the second one is assigned to both left and right).

    For more information, take a look at this article: https://www.geeksforgeeks.org/css-padding/

    Login or Signup to reply.
  2. It’s your column padding. I have commented it out, and this is the result.

    .row {
        display: flex;
        flex-wrap: wrap;
        padding: 0 4px;
    }
    
    .column {
        flex: 25%;
        max-width: 25%;
    /*    padding: 0 4px; */
        max-height: 50%;
    }
    
    .column picture {
        margin-top: 1rem;
    }
    
    .column img {
        width: 100%;
        object-fit: cover;
        height: 16%;
        display: block;
        margin-bottom: 1rem;
    }
    
    /* Media queries for responsiveness */
    @media screen and (max-width: 760px) {
        .column {
            flex: 50%;
            max-width: 50%;
        }
    }
    
    @media screen and (max-width: 600px) {
        .column {
            flex: 100%;
            max-width: 100%;
        }
    }
    <div class="row">
      <div class="column">
          <picture>
              <img src="https://picsum.photos/500">
          </picture>
          <picture>
              <img src="https://picsum.photos/500">
          </picture>
          <picture>
              <img src="https://picsum.photos/500">
          </picture>
      </div>
    
      <div class="column">
          <picture>
              <img src="https://picsum.photos/500">
          </picture>
          <picture>
              <img src="https://picsum.photos/500">
          </picture>
          <picture>
              <img src="https://picsum.photos/500">
          </picture>
      </div>
    
      <div class="column">
          <picture>
              <img src="https://picsum.photos/500">
          </picture>
          <picture>
              <img src="https://picsum.photos/500">
          </picture>
          <picture>
              <img src="https://picsum.photos/500">
          </picture>
      </div>
    
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search