Hey there, I'm encountering a couple of small issues.
- First, the col class is extending beyond the container area = https://i.sstatic.net/bvEAv.jpg
- Additionally, I need to add space between the two divs = https://i.sstatic.net/KWFAB.jpg
When I try adding the code below to resolve the issue, it works but breaks the layout causing one div to go under the other when resizing the browser window = https://i.sstatic.net/knflM.jpg
.col-sm-2, .col-sm-3, .col-sm-4, .col-sm-12 {
width: 48%;
margin-left: 20px;
}
The goal is to keep the divs beside each other with adequate spacing like this = https://i.sstatic.net/gMlqC.jpg
Also, I've noticed that including the space between the divs disrupts the responsiveness, causing them to stack on top of each other when the screen size decreases to less than 992px = https://i.sstatic.net/Y049G.jpg
I'm generally satisfied with the responsiveness right now, but introducing space between the divs seems to compromise it. Can anyone offer assistance in resolving this issue?
Here's the jsfiddle link: https://jsfiddle.net/vkb1aLeo/
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcdc0c0dbdcdbddcedfef9a819e819c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link href="style.css" rel="stylesheet" />
</head>
<style>
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-12 {
border: 1px solid #030303;
padding: 20px;
margin-top: 10px;
}
.item-name {
float: left;
width: 50%;
font-weight: 600;
}
.item-price {
float: right;
width: 50%;
font-weight: 600;
text-align: right;
}
.item-desc {
float: left;
color: #0d6583;
width: 58%;
}
.item-image {
float: right;
/* width: 40%; */
}
h4 {
padding: 10px;
font-size: 32px;
background: #945002;
color: white;
margin: 10px 0 10px 0;
}
</style>
<body>
<div class=" container">
<h1>Test:</h1>
<div class=" row">
<div class="">
<h4>Test</h4>
</div>
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="item-name">
<p>Salad</p>
</div>
<div class="item-price">
<span ><span ><p>€1.00</p></span></span>
</div>
<div class="item-desc">
<p>Packed with super foods</p>
</div>
<div class="item-image">
<img src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="Salad" />
</div>
</div>
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="item-name">
<p>Soup</p>
</div>
<div class="item-price">
<span ><span ><p>€1.0a0</p></span></span>
</div>
<div class="item-desc">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet.
</p>
</div>
<div class=" item-image">
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="Soup" />
</div>
</div>
</div>
</div>
</body>
</html>