bento-grid-main-FEMChallenge

Community feedback

• 

  P

  Sergei Borja•980

  @wonderlust101Posted about 2 months ago

  Before using a reset CSS, you have to know what each style does. I learned this the hard way. This is the issue for your image not cropping:

    /*
      5. Improve media defaults
    */
    img, picture, video, canvas, svg {
      display: block;
      max-width: 100%;
    }
    
  

  The max-width: 100%; is preventing your image being larger than the container. I made this mistake as well a few weeks ago for another project. You can either unset it or change the value if you need a max-width.

  Example:

  .overflow-image {
  max-width: unset;
  }
  

  or

  .overflow-image {
  max-width: 30rem; // or whatever value you want
  }
  

  As for the image that need to crop past the bottom. Since you already have the overflow on the containers, we won't talk about that. Make the image position relative and add a top: [value] and a negative top-margin: [same value] to offset the difference. I'll take your code as an example:

  .posting-img {
      width: 75%;
      align-self: baseline;
      position: relative;
      top: 2rem;
      margin-top: -2rem;
  }
  

  This is specific to your code but you can unset margin-top at either tablet or desktop breakpoint using the same method to unset max-width and just set the value of top to what you need since your grid set the row height to the tallest container.

  Marked as helpful

  0