Even distribution and scaling

Hey,

thanks for reaching out! Would you be so kind and give me a link to your blog, so that I can take a closer look? I think we can make that distribution happen but I will see what I can do about the scaling thing.

Looking forward to your reply, take care and have a nice day,
Petra

Hey Petra,

Thanks for your reply! My blog is still on a local host, so that’s a bit of a problem. Is there anything else I can do so you can help me out? Some code in particular you’re looking for?

Cheers,
Miguel

Hey Miguel,

thanks for getting back to me!
Well, usually I check which theme someone uses and then I test the CSS code modifications on my side. But you can try it out – go to the plugin settings-> “Advanced settings”-> click that “Enable custom CSS”-> and in the box add the following:

ul.related_post li{
padding: 20px !important;
}

Let me know if this changes anything and we will continue from there. It would help if you could at least make a screenshot of how the related posts look like now.
In the meantime I will test if I can make those images scale with the browser.

Take care,
Petra

Hey Petra,

Thanks for replying, you’re awesome! The theme I’m using is Sparkling by Colorlib.

I should have mentioned that I copied the css from the vertical layout into the custom css, which is from where I’m tweaking the css.

So I changed that code to 20px, which was too far to the right, but 12px puts it nicely in the center. That is, of course, until I start narrowing the window.

Here’s the screenshot: https://www.dropbox.com/s/9z20bo1uxs9grwi/Untitled.png?dl=0

Can I use css to move around the ‘Related posts’ text as well? Guess that’s more of a html thing in the plugin code itself, huh?

And here’s the whole of my custom code, if it’s of any help:

.wp_rp_wrap .related_post_title {
	clear: both;
	padding: 0 !important;
	margin: 0 !important;
}
div.wp_rp_content {
	display: inline-block !important;
}

div.wp_rp_footer {
	text-align: right !important;
	overflow: hidden !important;
}
div.wp_rp_footer a {
	color: #999 !important;
	font-size: 11px !important;
text-align: left !important;
	text-decoration: none !important;
	display: inline-block !important;
}
div.wp_rp_footer a.wp_rp_edit {
	color: #fff !important;
	font-size: 12px !important;
	text-decoration: underline !important;
text-align: left !important;
	font-weight: bold !important;
	background: #f79124 !important;
	border-radius: 2px !important;
	padding: 3px 6px;
}
ul.related_post {
	display: inline-block !important;
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
}
ul.related_post li {
	position: relative !important;
	display: inline-block !important;
	vertical-align: top !important;
	zoom: 1 !important;
	*display: inline !important;
	width: 200px !important;
text-align: left !important;
	margin: 10px 10px 10px 0px !important;
	padding: 12px !important;
	background: none !important;
}
ul.related_post li a {
	position: relative !important;
	display: block !important;
	font-size: 13px !important;
	line-height: 1.6em !important;
	text-decoration: none !important;
	margin-bottom: 5px !important;
	text-indent: 0 !important;
}
ul.related_post li img {
	display: block !important;
	width: 200px !important;
	height: 133px !important;
	max-width: 200px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;

	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
	opacity:1 !important;
	-webkit-transition: opacity 0.5s !important;
     	-moz-transition: opacity 0.5s !important;
       	-o-transition: opacity 0.5s !important;
          transition: opacity 0.5s !important;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

ul.related_post img:hover
{
opacity:0.6 !important;
-webkit-transition: opacity 0.5s !important;
     -moz-transition: opacity 0.5s !important;
       -o-transition: opacity 0.5s !important;
          transition: opacity 0.5s !important;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

ul.related_post li a img.wp_rp_santa_hat {
	display: none !important;
}

ul.related_post li small {
	font-size: 80%;
}

Muchas gracias for your help, looking forward to what you came up with for the scaling!

Hey,

I really tried to make the scaling work with CSS and our plugin but I couldn’t brute force it anyway other than this (put the following after your custom code):

@media only screen and (min-width: 150px) {
ul.related_post li {
width: 40px !important;
height: 26px !important;

}
ul.related_post li img {
width: 40px !important;
height: 26px !important;
}
}
@media only screen and (min-width: 480px){
ul.related_post li {
width: 80px !important;
height: 53px !important

}
ul.related_post li img {
width: 80px !important;
height: 53px !important
}
} 

ul.related_post li small {
	font-size: 80%;
}
@media only screen and (min-width: 680px) {
ul.related_post li {
width: 100px !important;
height: 66px !important;

}
ul.related_post li img {
width: 100px !important;
height: 66px !important;
}
}
@media only screen and (min-width: 880px) {
ul.related_post li {
width: 140px !important;
height: 93px !important;

}
ul.related_post li img {
width: 140px !important;
height: 93px !important;
}
}
@media only screen and (min-width: 1080px) {
ul.related_post li {
width: 160px !important;
height: 106px !important;

}
ul.related_post li img {
width: 160px !important;
height: 106px !important;
}
}
@media only screen and (min-width: 1400px) {
ul.related_post li {
width: 200px !important;
height: 133px !important;

}
ul.related_post li img {
width: 200px !important;
height: 133px !important;
}
}

Horrible coding I know ?? If you find a better solution let me know.

Take care and have a nice weekend,
Petra