Title: Suggestions for responsive list?
Last modified: December 10, 2021

---

# Suggestions for responsive list?

 *  Resolved [birdseeding](https://wordpress.org/support/users/birdseeding/)
 * (@birdseeding)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/suggestions-for-responsive-list/)
 * Hi, I’m not incredibly well versed in CSS/HTML, but I would love to have suggestions
   on how to make my list page responsive. I’m using the fully updated latest version
   of List Category Post, 0.86 I believe.
 * So I have this page on the webiste, where under different headings the following
   code is used to make a list of posts based on their review scores (which are 
   custom fields):
 * `[catlist name="Record Reviews" customfield_name="total_score" customfield_value
   ="10" thumbnail=yes customfield_display="total_score_summary" customfield_display_name
   =no title_tag=h4 thumbnail_size=200,200 thumbnail_class=lcp_thumbnail template
   ="thumbfirst"]`
 * In my custom.css I have the following:
 *     ```
       .lcp_catlist li{
         list-style: none;
         padding: 10px 5px 5px 5px;
         overflow: auto;
         min-height: 240px;
       }
   
       .lcp_catlist h4{
         line-height: 26px;
         font-size: 24px;
         font-weight: 900;
       }
   
       .lcp_catlist h4 a{
         color: #d10000;
         line-height: 22px;
         font-size: 24px;
         font-weight: 800;
       }
   
       .lcp_thumbnail{
         float:right;
         margin: 25px 0 0 15px;
         overflow: auto;
       	clear:both;
   
       }
       ```
   
 * Now, this looks great on a full-width screen, but on mobile it just squooshes
   up the text to the left, making it unreadable. I’ve been trying to figure out
   responsive coding and it’s honestly giving me a headache – does anyone have any
   suggestions for how to get the text to appear below the image (instead of to 
   the left of it) below a certain width (say, 600px)?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fsuggestions-for-responsive-list%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Contributor [zymeth25](https://wordpress.org/support/users/zymeth25/)
 * (@zymeth25)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/suggestions-for-responsive-list/#post-15153757)
 * You are using a custom template and in this template you moved the thumbnail 
   out of the `<li>` element and used floats to position it. There are many options
   to make it responsive but all of them, in my view, include not using floats. 
   For example:
    - In each `<li>` create two divs, one for the text content and one for the thumbnail
    - Set each div’s width in CSS
    - Use [media queries](https://css-tricks.com/a-complete-guide-to-css-media-queries/)
      to change the widths on smaller screens
 *  Thread Starter [birdseeding](https://wordpress.org/support/users/birdseeding/)
 * (@birdseeding)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/suggestions-for-responsive-list/#post-15161622)
 * Thank you, I will try that! I really like your plugin btw, it’s so rich in features
   and I love that it interacts well with custom fields.
 *  Plugin Contributor [zymeth25](https://wordpress.org/support/users/zymeth25/)
 * (@zymeth25)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/suggestions-for-responsive-list/#post-15161734)
 * Thanks, much appreciated! You can [post a review](https://wordpress.org/support/plugin/list-category-posts/reviews/)
   if you have found the plugin useful.

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

The topic ‘Suggestions for responsive list?’ is closed to new replies.

 * ![](https://ps.w.org/list-category-posts/assets/icon-256x256.png?rev=2517221)
 * [List category posts](https://wordpress.org/plugins/list-category-posts/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/list-category-posts/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/list-category-posts/)
 * [Active Topics](https://wordpress.org/support/plugin/list-category-posts/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/list-category-posts/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/list-category-posts/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [zymeth25](https://wordpress.org/support/users/zymeth25/)
 * Last activity: [4 years, 6 months ago](https://wordpress.org/support/topic/suggestions-for-responsive-list/#post-15161734)
 * Status: resolved