Please post your website url.
Please try it
@media screen and (max-width: 600px) {
.rpwe-block li {
float: none;
display: block;
margin: 0 0 20px 0;
width: 100%;
}
}
Hello Chamster,
Could you please post the CSS code to make two columns, please?
thanks in advance
Jaime
@chamster I would also be interested in seeing how you created columns for the recent posts. Thanks!
I like this plugin a lot, but I would LOVE it if I could get assistance on how to make it two columns and two rows with text centered under thumbnails, please. (I’ve tried searching for CSS codes et al without any success.) Thanks!
I don’t have time to pick through and figure out exactly what does what, but here’s all the css related to rpwe, that I’ve included in my child theme’s style.css file.
/*Recent posts widget*/
.home .rpwe-block ul {
list-style: none outside none !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
.home .rpwe-block h3 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
clear: none;
font-size: 16px !important;
font-weight: bold;
line-height: 1.5em;
margin-bottom: 0 !important;
margin-top: 0 !important;
font-family:helvetica neue;
}
.home .rpwe-clearfix:before, .home .rpwe-clearfix:after {
content: "";
display: table !important;
}
.home .rpwe-clearfix:after {
clear: both;
}
.home .rpwe-clearfix:before, .home .rpwe-clearfix:after {
content: "";
display: table !important;
}
.home .rpwe-block li {
border-bottom: 1px solid #EEEEEE;
list-style-type: none;
margin-bottom: 10px;
padding-bottom: 10px;
}
.home .rpwe-clearfix:before, .home .rpwe-clearfix:after {
content: "";
display: table !important;
}
.home .rpwe-clearfix:after {
clear: both;
}
.home .rpwe-block li {
border-bottom: 1px solid #ccc;
list-style-type: none;
margin-bottom: 10px;
padding-bottom: 10px;
}
.home .rpwe-alignleft {
display: inline;
float: left;
}
.home .rpwe-thumb {
border: 1px solid #EEEEEE !important;
box-shadow: none !important;
margin: 2px 10px 2px 0;
padding: 3px !important;
}
.home .rpwe-summary {
font-size: 16px;
line-height:18px;
}
.home .rpwe-block ul{
width:610px;
}
.home .rpwe-block li{
float:left;
margin:0 10px 10px 0;
width:300px;
}
.home .rpwe-block li:nth-child(even){
margin-right:0;
}
.home .rpwe-block a {
color:#1d6da5;
}
@media only screen and (max-width: 1180px) {
.home .rpwe-clearfix {
max-width: 280px;
}
}
@media only screen and (max-width: 1023px) {
.home .rpwe-clearfix {
max-width: 360px;
}
}
@media only screen and (max-width: 800px) {
.home .rpwe-clearfix {
max-width: 280px;
}
}
@media only screen and (max-width: 680px) {
.home .rpwe-clearfix {
max-width: 340px;
padding-right:10px;
}
.home .rpwe-block li {
float: none;
display: block;
margin: 0 0 20px 0;
width: 100%;
}
}
@media only screen and (max-width: 480px) {
.home .rpwe-clearfix {
padding-right:10px;
}
}
@media only screen and (max-width: 440px) {
.home .rpwe-clearfix {
padding-right:10px;
max-width:260px;
}
}
Oh and here’s the url where it’s used: http://www.garthstein.com/
@chamster Thanks for sharing that! For the life of me, I can’t get the two columns to work on our site. I don’t expect you to provide further instruction, but in a strange coincidence I just started reading “The Art of Racing in the Rain” last week!
@satrya Please consider this a feature request for building in some sort of option or providing documentation for CSS tweaks to display posts in columns.
Thank you!!!
FYI: The page where I’m trying to show tagged posts in 2 or 3 responsive columns via the shortcode is http://tripawds.org/donors/
Wow, that is quite a coincidence! Enjoy the book! And good luck with the columns. Wish I could help more. Have you tried just pasting all the css I included right to the bottom of your child theme’s style.css?
I did try that, but it didn’t work until I remembered I’m using a cssId (#donors)… I’ve got the list looking great in two columns now, if only I could get the responsiveness working for smaller screens. :-\
[Link moderated]
Thanks again for your time. And I am enjoying the book!
Got it! [Link moderated]
@chamster Thanks for the tips and the inspiration to do this in the first place.
@satrya Thanks for the original max-width style suggestion above.
At some point, we’ll just need to add pagination…but for now, for anyone interested, my CSS hacks follow below. I don’t claim this to be the cleanest or best way to do it, but it’s working for me.
NOTE: I’m using cssID=”donors” in my shortcode, change accordingly…
/* RECENT POSTS - DONORS */
#donors h3.rpwe-title {
background: none repeat scroll 0% 0% transparent !important;
clear: none;
margin-bottom: 0px !important;
margin-top: 0px !important;
font-weight: 400;
font-size: 18px !important;
line-height: 1.5em;
}
#donors .rpwe-summary {
font-size: 14px;
}
#donors .rpwe-time {
color: #999999;
font-size: 14px;
}
#donors ul{
width: 800px;
}
#donors li{
float:left;
margin:0 10px 10px 0;
width: 360px;
height: 150px;
padding: 10px;
list-style-type: none;
}
#donors li img {
max-width: 100%;
float: right;
padding-left: 10px;
}
#donors li:nth-child(even){
margin-right:0;
}
@media screen and (max-width: 800px) {
#donors ul {
float: none;
display: block;
margin: 0 0 20px 0;
width: 100%;
}
}
@media screen and (max-width: 800px) {
#donors li {
float: none;
display: block;
margin: 0 0 20px 0;
width: 100%;
height: 100%;
}
}
Thanks for all the follow-ups! This is very helpful. Q. Does anyone know how to get the text to go UNDER the thumbnail? I’m going for a vertical thumbnail with text underneath it with same width of the thumbnail.
@bsalarzon
Try adding float: none; to .rpwe-thumb
