Understanding how to automatically adjust margins in Bootstrap based on screen width

When viewing in fullscreen, the margins are set to ensure the container fits entirely within the page. However, without the 200px margin in the .gallery class, the container would be too big to fit on the page without scrolling.

The problem arises when the screen width shrinks, as the margins remain the same and push the container out of view.

I have tried using @media queries to adjust the margins as the screen width changes. But at dimensions 367x667 (iPhone SE dimensions), the container is entirely pushed in. How can I modify this so that the container still displays 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26444949525552544756661308160814">[email protected]</a>/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>

htmlcsstwitter-bootstrapflexboxbootstrap-5

Answer №1

The issue stems from not having specified widths for your elements. To rectify this, apply w-100 to your section and transfer gallery and bg-primary to the parent container div.

Next, update min to max-width in your media query. max-width defines styles for all screen 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398869884">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the power of jQuery to load Ajax content, unfortunately, the content remains

Hey there, I'm currently working with an HTML file that utilizes AJAX to load content from other HTML files on the same server. However, for some reason, it's not functioning properly. I'm new to AJAX and I'm not sure what could be caus ...

phpjavascriptjqueryhtmlajax

When the specified condition is met in HTML along with a designated URL

Is there a way I can implement an if condition in my HTML file within Codeigniter that checks the URL? Depending on whether or not it contains part of the URL, it would perform different actions. For instance: The initial URL is localhost/index.php/ca ...

phphtmlcodeigniterif-statementurl

Utilizing nested classes in CSS or SCSS for calling a class within another class

I am having trouble calling a class within another class. Can someone help me figure out how to do it? Here is the HTML code: <div class="main">Content</div> <div class="cover">Cover content</div> And here is t ...

css

Gliding over the problem with the Azure line

https://i.sstatic.net/7N3hO.jpg Is there a way to hide the opacity and font on hover? I have tried using outline: 0; in my CSS but there is still a blue line lingering. Any ideas on how to remove it? If you need to see the code and the issue I'm des ...

htmlcss

What is the best way to place a JavaScript or jQuery variable within an HTML tag?

Suppose we have a variable called var sticky_element = ".menu"; and then there's this line of code: jQuery(sticky_element).wrapInner('<div class="menu-inner"></div>'); How do we replace the menu in class="menu-inner" with the ...

javascriptjqueryhtmltagsvar

The spacing within the table's <tr> elements does not get altered

I am struggling to add a small space in the table <tr> but my attempts have not been successful. How can I resolve this issue? Please refer to the image below for clarification: https://i.sstatic.net/HXdhq.png .panel-booking .panel-body { pad ...

htmlcsshtml-table

Tips for automatically inserting a "read more" link once text exceeds a certain character count

Currently utilizing an open-source code to fetch Google reviews, but facing an issue with long reviews. They are messing up the layout of my site. I need to limit the characters displayed for each review and provide an option for users to read the full rev ...

javascriptjqueryhtmlcss

Store user input as cookies and showcase it to the user upon their return visit

I'm looking for some assistance in saving user input to cookies and displaying it to the user. The goal is to have the text entered in the input field change into a div and be displayed to the user every time they revisit the page. Currently, I only ...

javascriptjqueryhtmlcsscookies

monitoring the HTML code post-editing

After using jQuery, I made modifications to the HTML source code by adding several text fields. However, when I check the page source in Google Chrome, it still shows the original source code. Is there a method to view the updated HTML code? ...

htmlgoogle-chrome

Variances in the order of HTML elements within an article's layout

Check out this example of HTML and CSS <!DOCTYPE html> <html> <head> <title>Floats Example</title> <style type="text/css"> .left { float:left; width:100px; } .righ ...

htmlcss

Providing CSS through PHP file on IIS Server

When attempting to output CSS using PHP in order to increase its dynamism with WordPress settings, I encountered a 500 internal server error. Despite setting the header to text/css and trying to add handlers in IIS, the issue persists. Interestingly, there ...

phpcssiis

Tips for manually adding CSS/JS files for offline usage with Vue.js CLI

I am currently utilizing Vue.js CLI alongside AP.NET Core in a single-page application. I have identified the need to bundle some JavaScript/CSS files locally instead of relying on a CDN due to potential deployment scenarios without internet access. The co ...

htmlvue.jsasp.net-corebundling-and-minificationvue-cli

Identifying the moment when the body scroll reaches the top or bottom of an element

I have been experimenting with javascript and jquery to determine when the window scroll reaches the top of a specific element. Although I have been trying different methods, I have yet to see any successful outcomes: fiddle: https://jsfiddle.net/jzhang17 ...

javascriptjqueryhtmlcss

Utilize CSS for defining columns within a layout

How can CSS be utilized to organize elements into columns without altering the html tag order? <ul> <li class="column-2">1</li> <li class="column-1">2</li> <li class="column-1">3</li> <li class="column- ...

htmlcss

Aligning the Bootstrap navbar to the right causes the items to shift to the left

UPDATE: The issue has been resolved. It turns out that the navbar was not extending to 100% width and reaching the edges of the screen. I am currently facing a challenge with a Bootstrap 4 navbar, similar to issues I encountered with the previous version. ...

htmlcssalignmentnavbartwitter-bootstrap-4

I am looking to expand my CSS/HTML menu with an additional sub-sub menu. What is the correct way to achieve this?

This is my current CSS code that I am working on. I am trying to create a multi-level menu in Blogger with submenus, sub-submenus, and sub-sub-submenus without disrupting the existing formatting. .top-nav { background-color: #f9f9f9; background: t ...

htmlcss

Off Canvas left navigation menu using Bootstrap

I am working on creating a responsive layout for a webpage using Bootstrap. On larger displays, such as desktop resolutions, I want the webpage to show the header and left navigation as normal. However, when the site is resized to that of tablets or mobile ...

javascriptjqueryhtmltwitter-bootstrap-3

Tips for creating responsive content within an iframe

I have inserted a player from a website that streams a channel using an iframe. While I have managed to make the iframe responsive, the video player inside the iframe does not adapt to changes in viewport size. Despite trying various solutions found online ...

javascriptjqueryhtmlcssiframe

Creating a personalized v-for loop with v-if to apply a specific class to a div element

How can I correctly utilize v-if when using v-for inside? I am aiming to implement a condition where if the index is 0 or it's the first data, then add an active class. <div class="item active" v-for="(item, key, index) in slideItem" :key="item._ ...

javascripthtmlvue.js

Displaying two dropdown menus with just a single coding component

Hey everyone, I'm having a problem with the dropdown list. I added an ASP dropdown list to a modal popup using a Bootstrap theme, but when the modal pops up, the dropdown list appears twice. Check out this image for reference: https://i.stack.imgur.co ...

htmlcssbootstrap-4bootstrap-modal