Irfandeva
KPCKevin Powell - Community
•Created by Irfandeva on 3/27/2023 in #front-end
How to stop browser from applying system default theme to my site?
5 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
I was able to this on mobile also, all I had to do is add extra SOLVED tag, thanks.
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
I don't find any option to mark this as solved!!😆
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
hey thanks, it worked, i used vertical-align on image, and then overflow: hidden on parent div(top div).😆
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
Doesn't work
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
same result with vertical-align: bottom
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
display:block worked, but as you can see I'm using scale property on hover on image , when i hover over image, Top left right sides scale properly but image gets pushed down some pixels at the bottom
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
width: 100%;
height: auto;
}
.container {
width: 100%;
height: auto;
display: flex;
justify-content: center;
background-color: #f5f5f5;
}
.container .grid {
width: 100%;
max-width: 1024px;
height: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 1rem;
padding: .5rem;
}
.grid .grid-item {
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
background-color: #fff;
border-radius: .25rem;
overflow: hidden;
}
.grid-item .top {
background-color: rgb(34, 218, 43);
}
.grid-item .top img:hover {
scale: 1.05;
}
.grid-item .bottom {
margin: .25rem .15rem;
font-size: 1.1rem;
font-family: sans-serif;
color: rgb(59, 56, 56);
}
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
css
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="grid">
<div class="grid-item">
<div class="top">
<img src="assets/imgs/img.jpg" alt="">
</div>
<div class="bottom">
<p>Inception</p>
</div>
</div>
<div class="grid-item">
<div class="top">
<img src="assets/imgs/img.jpg" alt="">
</div>
<div class="bottom">
<p>Goalmaal</p>
</div>
</div>
<div class="grid-item">
<div class="top">
<img src="assets/imgs/img.jpg" alt="">
</div>
<div class="bottom">
<p>Munna bhai MBBS</p>
</div>
</div>
<div class="grid-item">
<div class="top">
<img src="assets/imgs/img.jpg" alt="">
</div>
<div class="bottom">
<p>Once upon a time in hollywood</p>
</div>
</div>
<div class="grid-item">
<div class="top">
<img src="assets/imgs/img.jpg" alt="">
</div>
<div class="bottom">
<p>Interestellar</p>
</div>
</div>
<div class="grid-item">
<div class="top">
<img src="assets/imgs/img.jpg" alt="">
</div>
<div class="bottom">
<p>Bhoot</p>
</div>
</div>
</div>
</div>
</body>
</html>
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
html
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
wait
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
did it, no luck
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 3/5/2023 in #front-end
Image doesn't fit in its parent div properly
thanks, but it didn't work
47 replies
KPCKevin Powell - Community
•Created by Irfandeva on 10/20/2022 in #front-end
flexbox
Thank you all for your time, I ditched the flex box and used grid and it worked (thanks @MarkBoots for your suggestion)
29 replies