JetPack Related Posts not mobile friendly

This worked for me. Add this to your stylesheet:

@media only screen and (max-width: 479px) {
   .jp-relatedposts-post:last-child {
      display: none;
   }
}

This will cause the last item in the Related Posts grouping to not appear on screen widths at or below the max-width value. (you could change that value if it’s not right for your needs.)

• This reply was modified 3 years, 1 month ago by mbrailer. Reason: "at or below" not "below"

Hello again, I’m glad you asked because it gave me an opportunity to improve the layout on my own site. Below is my code from the earlier example, with updates:

@media only screen and (min-width:321px) and (max-width:640px){
	.jp-relatedposts-post:last-child {
            display: none;
	}
}
@media only screen and (max-width:640px){
	.jp-relatedposts-items-visual {
            margin-right: -20px !important;
	}
}

Here’s what I changed from before:

• On screens 320 pixels and below, the thumbnails go to 100% of page width, so there’s no reason to eliminate the third one.
• On screens 640 pixels and below, a right margin, formerly 20px, is changed to -20px.

• This reply was modified 3 years, 1 month ago by mbrailer. Reason: Updated