I would suggest using flexbox on the parent element for the layout.
Desktop:
.parent{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.image{
width: 45%;
height: auto;
}
Mobile:
.parent{
flex-direction: column;
justify-content: flex-start;
}
.image{
width: 100%;
}
Flexbox is an amazing tool for layouts and I’d highly suggest looking into:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope it Helps! 🙂
On the third image, <div class="row justify-content-center"> will make it always centered no matter what,
I have a problem that I my grid looks quite different on mobile devices, meanwhile on PCs, it looks just like I wanted, and I realized that it’s a grid’s issue, but I don’t really know how to fix it since it gives different results all the time. Here’s the code I use:
.offer .card-img {
width: 220px;
height: 300px;
background-size: cover;
}
.offer {
cursor: pointer;
transition: all 130ms ease;
}
.card-img:hover {
transform: scale(1.01);
background-color: black !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container pt-5">
<div class="container">
<div class="row">
<figure>
<div class="col-md-4">
<div class="card offer">
<div class="card-img" style="background: url('https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg') no-repeat center center" alt=""></div>
<div class="card-img-overlay">
<h5 class="mx-auto">Classic</h5>
</div>
</div>
</div>
</figure>
<figure>
<div class="col-md-4">
<div class="card offer">
<div class="card-img" style="background: url('https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg') no-repeat center center" alt=""></div>
<div class="card-img-overlay">
<h5 class="mx-auto">Classic</h5>
</div>
</div>
</div>
</figure>
</div>
<div class="row justify-content-center">
<figure >
<div class="col-md-6">
<div class="card offer">
<div class="card-img" style="background: url('https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg') no-repeat right center" alt=""></div>
<div class="card-img-overlay">
<h5 class="mx-auto">Classic</h5>
<p class="card-text"></p>
</div>
</div>
</div>
</figure>
</div>
</div>
</div>and this is how it looks on my website
but when i resize my screen, it changes to this
I would appreciate any help.
Of course it looks like that on resized screen when you have justify-content-center on third div. Maybe you should explain what do you want as I can’t really figure it out.
How can I use it in my code? what should I put as .parent meanwhile i’m using card to show images? sorry, i’m a beginner