I have a card featuring an image, accompanied by a banner placed next to it. To structure this layout, I am using col-lg-8 for the card and col-lg-4 for the banner. However, I'm facing an issue with excessive white space between the card (which has a padding-right: 20px) and the banner, as depicted in this screenshot:https://i.sstatic.net/PyyJj.png
The desired outcome is to eliminate the extra whitespace and maintain only the padding-right: 20px (or margin-right) between the card and the banner. Essentially, extending the width of the image up to the example red line while keeping the orange banner size fixed without resizing it. Consequently, creating an enlarged card with some white space (20 px) between the card and the banner followed by the fixed banner. The sole "empty whitespace" should be the 20px gap between the card and the banner in alignment with the Bootstrap grid of col-lg-8 and col-lg-4.
How can I enlarge the card without altering col-lg-8 and col-lg-4? (I also attempted col-lg-9, but found the card to be excessively large).
My attempts at solutions (seemingly correct, but problematic):
WIDTH IMAGE 105%: Trying a
105% widthfor the card initially seemed successful; however, upon resizing the window, the card merged with or overlapped the banner, losing the right padding.WIDTH COLUMNS 75% and 25%: Adjusting the column widths involved changing
.col-lg-8fromwidth: 66.66666667%to75%and.col-lg-4fromwidth: 25%to achieve a total of100%. While this seemed effective, feedback cautioned against modifying Bootstrap's column widths citing unprofessional practices.REMOVE TEXT-ALIGN: RIGHT: Removing
.banner {text-align: right;}prompted the banner to approach the card, but resulted in empty space on the right of the banner. Uncertain whether this aligns with the solution. Refer to another screenshot
Here is the code snippet on CodePenthe code on CodePen for further testing. Requesting guidance on the optimal solution to address my query above. Thank you all in advance!
@media (min-width: 992px) {
.container-pc {
display: flex;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 992px) {
.container-primapagina {
padding-right: 20px;
}
}
.banner {
text-align: right;
}
.height1 {
height: 450px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0828f8f949394928190a0d5ced3ced0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385a57574c4b4c4a5948780d160b1608">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container-pc">
<div class="container-primapagina col-12 col-md-8 col-lg-8">
<div class="card text-bg-dark">
<img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
</div>
</div>
</div>
<div class="banner col-lg-4">
<img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
</div>
</div>
<div class="container-pc">
<div class="col-lg-8" style="background-color: aqua;" ;>Col 8 (Utility only for measuring)</div>
<div class="col-lg-4" style="background-color: rgb(81, 255, 0);" ;>Col 4 (Utility only for measuring)</div>
</div>
</body>
</html>