How to Fix Median UI 1.5 Related Post Widget

How to Fix Median UI 1.5 Related Post Widget

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

  1. Open  Blogger Dashboard

  2. Click  Theme

  3. Press  the Inverted Triangle icon

  4. Select  Edit HTML

  5. Then look for the code /* Related Posts */

  6. Block all the code below it, then replace it with the new modified code.

  7. This replacement code:

  8. .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}}
  9. Save Theme


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

Related Post

No comments