What is the best way to apply a left margin to an image only when it is displayed on its own line on small screens using Bootstrap 4.0?

Question

What is the best way to apply a left margin to an image only when it is displayed on its own line on small screens using Bootstrap 4.0?

Here is some code I have to display 2 images next to each other:

<img style="padding-left:25%;margin-top:15px;margin-right:20%" src="~/img/1.png" /><img  style="margin-top:15px" src="~/img/2.png" />

As shown below:

https://i.sstatic.net/m2yDU.png

However, on smaller screens, the 2 images will be displayed underneath each other (which is okay), but they won't be vertically aligned as seen in the image below:

https://i.sstatic.net/d8WWL.png

How can I correct this? In simple terms, how do I add a left margin to the second image only when it appears on a separate line?

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

To achieve responsive design, you must incorporate media queries:

img {
    margin-top:15px;
}
@media screen and (min-width: 768px) {
    img {
        padding-left:25%;
        margin-right:20%;
    }
}

The specific value of 768px used in the media query is flexible and can be adjusted to meet your requirements. Another option is to utilize min-resolution instead of min-width.

Answer 2

To achieve responsive design, you must incorporate media queries:

img {
    margin-top:15px;
}
@media screen and (min-width: 768px) {
    img {
        padding-left:25%;
        margin-right:20%;
    }
}

The specific value of 768px used in the media query is flexible and can be adjusted to meet your requirements. Another option is to utilize min-resolution instead of min-width.

Answer 3

Answer №2

An alternative approach is to utilize the display property along with a media query.

<div class="display">
 <img style="margin-right: 20px;" src="~/img/1.png" />
 <img src="~/img/2.png" />
</div>

.display {
  display: flex;
}
@media(min-width: 320px) and (max-width: 767px) {
 .display {
   display: block;
 }
}

Answer 4

An alternative approach is to utilize the display property along with a media query.

<div class="display">
 <img style="margin-right: 20px;" src="~/img/1.png" />
 <img src="~/img/2.png" />
</div>

.display {
  display: flex;
}
@media(min-width: 320px) and (max-width: 767px) {
 .display {
   display: block;
 }
}

Answer 5

Answer №3

If you want to handle this with javascript, one way would be to listen for the window resize event and then calculate if the total width of all images exceeds the window width. Based on that, you can adjust margin or padding as needed.

window.addEventListener('resize', function(event){ //listen to window resize
  let img1w = document.getElementById('image1').offsetWidth;
  let img2w = document.getElementById('image2').offsetWidth;
  if (img1w + img2w > window.innerWidth) {
    document.getElementById('img1w').style.marginLeft = '200px' //just a placeholder. do what you want here
  }
});

An alternative approach is to use bootstrap media queries, but keep in mind that there are only a limited number of predefined break points. If you need more control, creating your own custom media query may be the better option.

Answer 6

If you want to handle this with javascript, one way would be to listen for the window resize event and then calculate if the total width of all images exceeds the window width. Based on that, you can adjust margin or padding as needed.

window.addEventListener('resize', function(event){ //listen to window resize
  let img1w = document.getElementById('image1').offsetWidth;
  let img2w = document.getElementById('image2').offsetWidth;
  if (img1w + img2w > window.innerWidth) {
    document.getElementById('img1w').style.marginLeft = '200px' //just a placeholder. do what you want here
  }
});

An alternative approach is to use bootstrap media queries, but keep in mind that there are only a limited number of predefined break points. If you need more control, creating your own custom media query may be the better option.

What is the best way to apply a left margin to an image only when it is displayed on its own line on small screens using Bootstrap 4.0?

Answer №1

Answer №2

Answer №3

Similar questions

Use JavaScript to overlay a rectangle on top of an HTML element

When a container is styled with 'overflow-y: auto', it will display additional horizontal and vertical scrolling bars

Tips for aligning a Bootstrap container in the middle of the viewport vertically

After being redrawn, the line on the canvas vanishes

Tips for resolving an overlap issue with the navbar dropdown on the right side of a navbar in react js using app.css

What is the correct way to maintain focus on a nested scrolling div over another scrolling div with jQuery?

Form validation using JQuery within a Bootstrap 4 modal incorporating tabs is preventing submission

Implementing dynamic tab switching using Ajax and jQuery to add active classes

Steps to directly reference a particular shape within an SVG illustration

I'm looking for help on creating a three-column table using javascript/jquery. The table should display Product, Price, and Discount (which is calculated at 20%). Can anyone

Creating a Personalized Dropdown Menu Within the <div> Tag

CSS Buttons with a rounded design on one edge

Tips for wrapping the content of a <span> element within a <td> element

There is an unnecessary gap between the parent div and the image contained within it

implementing css class in javascript

Instead of shifting the floated div, opt to have the window cut off instead

Styling can be compromised by Angular due to selector element interference

Add a DropDown menu to the RadToolBarDropDown component

What steps can I take to ensure that the original field does not regain focus once the dialog is closed?

How to customize the appearance of an element within a shadow DOM