[英]How do I make responsive 3 rows with images
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.我有一个问题,我的网格在移动设备上看起来完全不同,同时在 PC 上,它看起来就像我想要的那样,我意识到这是一个网格的问题,但我真的不知道如何解决它,因为它给出了不同的结果一直。 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.我将不胜感激任何帮助。
I would suggest using flexbox on the parent element for the layout.我建议在布局的父元素上使用 flexbox 。
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/ Flexbox 是一款出色的布局工具,我强烈建议您研究一下: 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,在第三张图片上,
<div class="row justify-content-center">
无论如何都会使其始终居中,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.