used bootstrap, not responsive

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello BLUEBOYLEE , congratulations for your new solution!

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

  Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 900px will not grow or shrink because the size will be ever the same, but a container with max-width: 900pxx or min-width: 900px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  A good practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  If you’re not familiar to media queries and responsiveness, here’s a good resource to learn it: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  ✌️ I hope this helps you and happy coding!

  1