fix: Fixed CSS for post thumbnail
All checks were successful
Deploy Blog to Folder / deploy (push) Successful in 4s
All checks were successful
Deploy Blog to Folder / deploy (push) Successful in 4s
This commit is contained in:
@ -11,10 +11,9 @@
|
||||
}
|
||||
.post-layout main .thumbnail {
|
||||
width: 100%;
|
||||
height: 375px;
|
||||
height: 300px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.post-layout main > div {
|
||||
background-color: rgba(255, 255, 255, .71);
|
||||
@ -41,6 +40,7 @@
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 2px 4px rgba(var(--black), .21);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
.post-card:hover {
|
||||
transform: translate(-4px, -4px); /* Up and left by 4px */
|
||||
@ -57,8 +57,21 @@
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.post-layout main .thumbnail {
|
||||
height: 375px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.posts {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.post-card {
|
||||
margin: 0;
|
||||
}
|
||||
.post-layout main .thumbnail {
|
||||
height: 375px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user