Make Rows in Mobile?

Resolved micahjmurray
(@micahjmurray)

11 years, 11 months ago
Hi There,

I’m using this plugin and I really like it. However, on my mobile version it’s just showing one long column of four thumbnails. I’m wondering if there’s a way to force it to shrink the four thumbnails into one row on mobile, (as it displays on desktop) or better yet, into a nice neat square area of 2×2 thumbnails?

As is, scrolling down takes up a lot of space on mobile.

This is the custom CSS I have now:
```
.wp_rp_content {margin-left: 0px;
display: inline !important;
width: 100%;}
.related_post_title { text-align:left; font-size:medium;
}
ul.related_post {text-align:center;
}
ul.related_post li {text-align:center;
width: 150px !important;
}
ul.related_post li a {text-align:center;
}
ul.related_post li img {text-align:center;
}
ul.related_post li a {
}
ul.related_post li a:hover{
}
```
My site is redemptionpictures.com

Thank You

https://wordpress.org/plugins/wordpress-23-related-posts-plugin/

Viewing 3 replies - 1 through 3 (of 3 total)

(@petrap)

Hey Micah,

thanks for reaching out – I’ll gladly help! The thing is, we made our mobile themes responsive, so for example on Samsung Galaxy Note 3, it already shows 2×2 thumbnails. However, the following code:

.wp_rp_content {margin-left: 0px;
display:inline !important;
width: 100%;}
.related_post_title { text-align:left; font-size:medium;
}
ul.related_post {text-align:center;
}
ul.related_post li {text-align:center;
width: 150px !important;
}
ul.related_post li a {text-align:center;
}
ul.related_post li img {text-align:center;
}
ul.related_post li a {
}
ul.related_post li a:hover{
}
@media screen and (max-width: 480px){
 .wp_rp_content {margin-left: 0px;
width: 100%;}
.related_post_title { text-align:left; font-size:medium;
}
ul.related_post {text-align:center;
}
ul.related_post li {text-align:center;
width: 100px !important;
}
ul.related_post li a {text-align:center;
}
ul.related_post li img {text-align:center;
width: 100px !important;
height:100px !important;
}
}

will force 2×2 thumbnails to appear, for example on Google Nexus S, Apple iPhone 5,… But if you would like, I can adjust the code for you specifically – I just need to know which mobile device are you using?

Hope this helps and please let me know how it goes!

Best,
Petra

Thread Starter

micahjmurray

(@micahjmurray)

11 years, 11 months ago

This works perfectly. Thank you so much.

PetraP

(@petrap)

11 years, 11 months ago

Glad to hear it works 😀

Viewing 3 replies - 1 through 3 (of 3 total)