I'm new and I'm having a problem--this page is not responsive for 1366, and 1280 resolutions on PC, on 1920, and on mobile it's perfect. May you please help me with this one?
I tried adding contain on object-fit, but that didn't help me, I think the problem is with the width but I can't figure out how to solve this properly without ruining it on 1920 resolution and mobile phone.
Resolution 1366
.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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div >
<div >
<div >
<a href="zgradaA.html">
<img src="https://via.placeholder.com/800" /></a>
</div>
<br>
<div ><img src="https://via.placeholder.com/800" />
</div>
</div>
</div>
<div ></div>
<div >
<div >
<div >
<img src="https://via.placeholder.com/800" /></div>
<br>
<div ><img src="assets/img/szgrade/zgradaD.jpg" />
</div>
</div>
</div>
CodePudding user response:
I removed Row code from the container and it's working. :) They are only used for containing columns. I don't have columns so I tried removing the row class and everything is cool right now. I hope that this will stay like this :)