Title: Make columns responsive Last modified: August 21, 2016 --- # Make columns responsive * [chamster](https://wordpress.org/support/users/chamster/) * (@chamster) * [12 years ago](https://wordpress.org/support/topic/make-columns-responsive-1/) * Hi. I have this widget installed on a page, where I’m displaying the recent posts in two columns. It works well but when displayed on a small screen it stays two columns so that much of the content is off the screen. The rest of my theme is responsive. Is there a way (via css?) to make it so that below a certain screen resolution the two columns change to 1 column? Thanks. * [https://wordpress.org/plugins/recent-posts-widget-extended/](https://wordpress.org/plugins/recent-posts-widget-extended/) Viewing 14 replies - 1 through 14 (of 14 total) * Plugin Author [satrya](https://wordpress.org/support/users/satrya/) * (@satrya) * [12 years ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796383) * Please post your website url. * Thread Starter [chamster](https://wordpress.org/support/users/chamster/) * (@chamster) * [12 years ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796433) * [http://www.terracomwebdesign.com/websites/gs2014/](http://www.terracomwebdesign.com/websites/gs2014/) user:guest pass:guest Thanks. * Plugin Author [satrya](https://wordpress.org/support/users/satrya/) * (@satrya) * [12 years ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796435) * Please try it * ``` @media screen and (max-width: 600px) { .rpwe-block li { float: none; display: block; margin: 0 0 20px 0; width: 100%; } } ``` * [jaimea](https://wordpress.org/support/users/jaimea/) * (@jaimea) * [11 years, 6 months ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796629) * Hello Chamster, * Could you please post the CSS code to make two columns, please? * thanks in advance * Jaime * [agreda](https://wordpress.org/support/users/agreda/) * (@agreda) * [11 years, 5 months ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796630) * [@chamster](https://wordpress.org/support/users/chamster/) I would also be interested in seeing how you created columns for the recent posts. Thanks! * [Bunn Salarzon](https://wordpress.org/support/users/bsalarzon/) * (@bsalarzon) * [11 years, 5 months ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796631) * 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! * Thread Starter [chamster](https://wordpress.org/support/users/chamster/) * (@chamster) * [11 years, 5 months ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796632) * 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; } } ``` * Thread Starter [chamster](https://wordpress.org/support/users/chamster/) * (@chamster) * [11 years, 5 months ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796633) * Oh and here’s the url where it’s used: [http://www.garthstein.com/](http://www.garthstein.com/) * [agreda](https://wordpress.org/support/users/agreda/) * (@agreda) * [11 years, 5 months ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796634) * [@chamster](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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/](http://tripawds.org/donors/) * Thread Starter [chamster](https://wordpress.org/support/users/chamster/) * (@chamster) * [11 years, 5 months ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796635) * 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? * [agreda](https://wordpress.org/support/users/agreda/) * (@agreda) * [11 years, 5 months ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796636) * 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! * [agreda](https://wordpress.org/support/users/agreda/) * (@agreda) * [11 years, 5 months ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796637) * **Got it!** _[Link moderated]_ * [@chamster](https://wordpress.org/support/users/chamster/) Thanks for the tips and the inspiration to do this in the first place. * [@satrya](https://wordpress.org/support/users/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%; } } ``` * [Bunn Salarzon](https://wordpress.org/support/users/bsalarzon/) * (@bsalarzon) * [11 years, 5 months ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796638) * 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. * [agreda](https://wordpress.org/support/users/agreda/) * (@agreda) * [11 years, 5 months ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796639) * [@bsalarzon](https://wordpress.org/support/users/bsalarzon/) * Try adding float: none; to .rpwe-thumb Viewing 14 replies - 1 through 14 (of 14 total) The topic ‘Make columns responsive’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/recent-posts-widget-extended_3384ca. svg) * [Recent Posts Widget Extended](https://wordpress.org/plugins/recent-posts-widget-extended/) * [Frequently Asked Questions](https://wordpress.org/plugins/recent-posts-widget-extended/#faq) * [Support Threads](https://wordpress.org/support/plugin/recent-posts-widget-extended/) * [Active Topics](https://wordpress.org/support/plugin/recent-posts-widget-extended/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/recent-posts-widget-extended/unresolved/) * [Reviews](https://wordpress.org/support/plugin/recent-posts-widget-extended/reviews/) ## Tags * [columns](https://wordpress.org/support/topic-tag/columns/) * 14 replies * 5 participants * Last reply from: [agreda](https://wordpress.org/support/users/agreda/) * Last activity: [11 years, 5 months ago](https://wordpress.org/support/topic/make-columns-responsive-1/#post-4796639) * Status: not resolved