Hey there, I'm a newcomer and experiencing an issue. The page is not responsive for 1366 and 1280 resolutions on PC, although it looks perfect on 1920 and mobile devices. Can anyone provide me with some guidance?
I attempted to add `contain` on `object-fit`, but unfortunately, that didn't resolve the problem. I suspect the issue lies with the width, however, I am struggling to find a solution without adversely affecting the layout on 1920 resolution and mobile phones.
Resolution 1366
https://i.sstatic.net/NHbcm.png
.container1 {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
.container1>div {
padding: 0px 5px;
max-width: 100%;
height: 325px;
}
.container1 div img {
width: 100%;
height: 100%;
object-fit: cover;
}
.zgrade {
position: relative;
max-width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
max-width: 745px;
min-width: 428px;
}
.zgradeimg {
width: 500px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.4s ease-in-out;
}
.zgrade:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
@media screen and (max-width: 780px) {
.container1 {
flex-direction: column;
}
.container1>div {
padding: 10px 5px;
}
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c3f3869d829d80">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container1">
<div class="row justify-content-center">
<div class="zgrade">
<a href="zgradaA.html">
<img src="https://via.placeholder.com/800" /></a>
</div>
<br>
<div class="zgrade"><img src="https://via.placeholder.com/800" />
</div>
</div>
</div>
<div class="p-6"></div>
<div class="container1">
<div class="row justify-content-center ">
<div class="zgrade ">
<img src="https://via.placeholder.com/800" /></div>
<br>
<div class="zgrade"><img src="assets/img/szgrade/zgradaD.jpg" />
</div>
</div>
</div>