Solution: Mobile-responsive design

One problem with YARPP is that it isn’t mobile responsive, as far as I can tell. So when I view my website on a mobile, the text and pictures are realy small.

Well, I’ve managed to make the design more responsive. Now I have a row of four thumbnails when I view the blog with a computer, and two rows of two thumbnails when I view the blog with a phone.

I put this code into the CSS Stylesheet Editor:

/* if screen size is smaller than 1024*/
@media screen and (max-width:1023px) {

	.yarpp-related .yarpp-thumbnail-title {
		font-size: 200% !important;
		height: 240px !important;
		width: 240px !important;
	}

	.yarpp-thumbnails-horizontal .yarpp-thumbnail {
		width: 260px !important;
	}

	.yarpp-thumbnail > img, .yarpp-thumbnail-default {
		width: 240px !important;
		height: 240px !important;
	}

	.yarpp-thumbnail {
		height: 480px !important;
	}

	.yarpp-related h3 {
		font-size: 200% !important;
	}
}