TrickPk.com - The Related Post widget that says "You might like this post" in Median UI version 1.5 looks really bad. The reason has been explained in the previous post about the Lack of Median UI Template v1.5 - Lots of Bugs? .
The Related Articles widget under this Median UI v1.5 post should indeed be changed. So that it is more eye-catching and does not make visitors tired of scrolling when opened via HP.
As a fellow blogger, of course I can't just criticize other people's templates. Therefore, I will provide a surefire solution to fix the lack of Median UI 1.5 related post widgets.
How to Fix Median UI 1.5 Related Post Widget
Open Blogger Dashboard
Click Theme
Press the Inverted Triangle icon
Select Edit HTML
Then look for the code /* Related Posts */
Block all the code below it, then replace it with the new modified code.
This replacement code:
Save Theme
.relatedPosts{margin:40px 0 0;line-height:1.6em} .relatedPosts ul{display:flex;flex-wrap:wrap; position:relative;width:calc(100% + 20px);left:-10px;right:-10px; list-style:none;margin:0;padding:0} .relatedPosts li{display:block;width:calc(33.333% - 20px); margin:0 10px 30px;border:1px solid #f6f6f6;padding:10px;border-radius:10px;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1)} .relatedPosts .itemThumbnail a{background-image:none; color:inherit} .relatedPosts .itemThumbnail > *:before{content:'Loading';display:block;position:absolute;top:50%;left:50%;max-width:none;max-height:100%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%); font-size:12px; opacity:.7} .relatedPosts .itemThumbnail div{background-position:center;background-size:cover;background-repeat:no-repeat; display:block;position:absolute;top:0;left:0;bottom:0;right:0} .relatedPosts .itemTitle{font-size:.85rem;line-height:normal; font-family:var(--font-head);font-weight:700} @media screen and (max-width:1100px){.relatedPosts li{width:calc(50% - 20px)}} @media screen and (max-width:896px){.relatedPosts li{width:calc(33.333% - 20px)}} @media screen and (max-width:640px){.relatedPosts li{width:calc(50% - 20px)}} @media screen and (max-width:480px){.relatedPosts ul{flex-wrap:wrap;width:calc(100% + 40px);left:-20px;right:-20px;margin-bottom:50px;padding:10px 20px 0; overflow-y:hidden;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch} .relatedPosts li{width:calc(50% - 20px);display:block;flex-shrink:0;margin:0 10px 10px; scroll-snap-align:center} .relatedPosts li:last-child{margin-right:0} .relatedPosts ul:after{content:'';display:block;flex-shrink:0; align-self:stretch;padding-left:20px} .relatedPosts .itemTitle{font-size:13px} .rtlMode .relatedPosts li{margin:0 0 0 15px} .rtlMode .relatedPosts li:last-child{margin-left:0}}
Finally
That's how to fix and modify the article widget regarding the Median UI v1.5 template . Also read other tutorials about Median UI here