Bootstrap how to change margins automatically with screen width-CodePudding

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 367x667 (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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<section >
  <div >
    <div >
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
    </div>
  </div>
</section>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<section >
  <div >
    <div >
      <div >
        <img  src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img  src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img  src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img  src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img  src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img  src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
      <div >
        <img  src="https://source.unsplash.com/collection/190728/1500x900" alt="">
      </div>
    </div>
  </div>
</section>