make post images in feed smaller in smaller screens

This commit is contained in:
Dean Attali 2020-07-05 03:53:40 +00:00
parent 23322c281f
commit 43809d04ae
3 changed files with 13 additions and 1 deletions

View File

@ -5,6 +5,7 @@
- Add support for sharing pages on new social network: VK (#657) - Add support for sharing pages on new social network: VK (#657)
- Use Open Graph type 'article' for blog posts (#669) - Use Open Graph type 'article' for blog posts (#669)
- Use Twitter's `summary_large_image` card when `share-img` is specified (#668) - Use Twitter's `summary_large_image` card when `share-img` is specified (#668)
- Make post images in the feed page smaller on smaller devices
## v3.0.0 2020-05-07 ## v3.0.0 2020-05-07

View File

@ -3,6 +3,7 @@ layout: post
title: Flake it till you make it title: Flake it till you make it
subtitle: Excerpt from Soulshaping by Jeff Brown subtitle: Excerpt from Soulshaping by Jeff Brown
cover-img: /assets/img/path.jpg cover-img: /assets/img/path.jpg
image: /assets/img/path.jpg
share-img: /assets/img/path.jpg share-img: /assets/img/path.jpg
tags: [books, test] tags: [books, test]
--- ---

View File

@ -484,6 +484,7 @@ footer .footer-custom-content {
} }
.post-image { .post-image {
float: right; float: right;
margin-left: 0.625rem;
height: 12rem; height: 12rem;
width: 12rem; width: 12rem;
margin-top: -2.1875rem; margin-top: -2.1875rem;
@ -539,6 +540,14 @@ footer .footer-custom-content {
} }
} }
@media (max-width: 767px) {
.post-image, .post-image img {
margin-top: 0;
height: 9rem;
width: 9rem;
}
}
@media (max-width: 500px) { @media (max-width: 500px) {
.post-image, .post-image img { .post-image, .post-image img {
height: 6.25rem; height: 6.25rem;
@ -549,7 +558,8 @@ footer .footer-custom-content {
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-top: 0; margin-top: 0;
float: left; margin-left: 0;
float: none;
} }
} }
/* --- Post and page headers --- */ /* --- Post and page headers --- */