Image attached is the button from display of two different sizes (24inch and 13inch), button on 24inch display appears normal whereas add to cart button on 13inch display is broken.13inch display button 24 inch display button
<div id="3">
<span id="lblArtworkId" style="display: none;">3</span>
<div >
<div >
<a href="./">
<img src="upload/artworks/Artwork3.jpg" alt="" style="max-height: 8rem;">
</a>
</div>
</div>
<div >
<div >
<span>
<a href="./" >
Construction in Red, Blue & Yellow Drawing
</a>
</span>
<hr>
<p >Artist: Karin White</p>
</div>
</div>
<div >
<div >
<span >$ 1120.00</span>
</div>
</div>
<div >
<div >
<button id="btnRemove" >Remove</button>
<button id="btnCart" >Add to Cart</button>
</div>
</div>
</div>
CodePudding user response：
Welcome to stackoverflow.
You can use cols with a breakpoint prefix to adjust the layout. (e.g. col-xxl-2 col-3). Read Bootstrap Breakpoints and Grid options for more information. Also, since Bootstrap is sensitive to pixels, it is much better to consider pixels instead of inches.
Example:
<div >
<div id="3">
<span id="lblArtworkId" style="display: none;">3</span>
<div >
<div >
<a href="./">
<img src="upload/artworks/Artwork3.jpg" alt="" style="max-height: 8rem;">
</a>
</div>
</div>
<div >
<div >
<span>
<a href="./" >
Construction in Red, Blue & Yellow Drawing
</a>
</span>
<hr>
<p >Artist: Karin White</p>
</div>
</div>
<div >
<div >
<span >$ 1120.00</span>
</div>
</div>
<div >
<div >
<button id="btnRemove" >Remove</button>
<button id="btnCart" >Add to Cart</button>
</div>
</div>
</div>
</div>
Edit
Don't forget to include the required meta tags:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>