Bootstrap how to change margins automatically with screen width

Issue

On fullscreen I have the margins set to have the container fit entirely within the page, without the margin: 200px in margins in .gallery the container would be to big to fit on the page without having to scroll to see it all

The isssue Im running into is when the screen width shrinks the margins stay the same and push the container out of existence

I am trying to use @media only screen max-width to change it alongside the screen width changes. But at dimensions 367×667 (iphone SE dimensions) the container is completely pushed in. How can I change this so that the container still appears at those dimensions?

  @media only screen and (min-width: 400px) {
    .gallery{
      padding: 0px;
      margin: 40px;
      margin-top: 0px;
      margin-bottom: 0px;
    }
  }

.gallery-dog-img {
  max-height: 100%;
  max-width: 100%;
  cursor: pointer;
  width: 75%;
  height: 75%;
  }

.gallery{
  padding: 40px 40px;
  margin: 200px;
  margin-top: 0px;
  margin-bottom: 0px;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<section class="gallery bg-primary">
  <div class="container-sm dog-gallery-container">
    <div class="row align-items-center g-0 dog-images-row row-cols-1 row-cols-sm-2 row-cols-md-3">
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
    </div>
  </div>
</section>

Solution

The problem comes from a lack of defined widths on your elements. Add w-100 on your section and move gallery and bg-primary to the parent container div.

Then change min to max-width on your media query. max-width specify styles for all sizes below the specified width.

@media only screen and (max-width: 800px) {
  .gallery {
    padding: 0px;
    margin: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
}

.gallery-dog-img {
  max-height: 100%;
  max-width: 100%;
  cursor: pointer;
  width: 75%;
  height: 75%;
}

.gallery {
  padding: 40px 40px;
  margin: 200px;
  margin-top: 0px;
  margin-bottom: 0px;
}
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<section class="w-100">
  <div class="container-sm dog-gallery-container bg-primary gallery">
    <div class="row align-items-center g-0 dog-images-row row-cols-1 row-cols-sm-2 row-cols-md-3">
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div class="col d-flex justify-content-center dog-cell">
        <img class="gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
    </div>
  </div>
</section>

Answered By – Kameron

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.