In the last post Embed Medium Blog On Website. This is a free and simple guide through… | by 洪健翔 Hung, Chien-hsiang | Jul, 2022 | Medium, I’ve shown you how to embed your medium post into your website with Zero Cost and Absolute Customized. But it doesn’t seem perfect enough, does it? So here we are, with some simple customization of adjustment, let’s modernize your embedded medium post with some simple responsive web design technique.
How It Works
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .medium-card span {
padding: 8px 8px 8px 8px;
}
/* https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image */
.medium-card img {
width: 200px;
height: 200px;
object-fit: cover; /* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
object-position: center; /* Center the image within the element */
min-height: 100%;
min-width: 100%;
}
.medium-card img {
transition: all 0.5s;
}
.medium-card:hover img {
transform: scale(1.2);
}
|
1
2
3
4
5
| /* Sometimes it's also useful to use window.innerWidth (not typically found on mobile devices) instead of screen width
when dealing with desktop browsers where the window size is often less than the device screen size. */
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
|
and
1
| pageSize = (width < 768) ? 1 : 3;
|
in promise.then()
We put <meta name="viewport" content="width=device-width, initial-scale=1"> this in <head> tag
GitHub: chienhsiang-hung/embed-medium-blog-on-website at RWD (github.com)
Contact me: Hung, Chien-Hsiang (chienhsiang-hung.github.io)
