Suggestions for responsive list?

  • Resolved birdseeding

    (@birdseeding)


    2 years, 11 months ago

    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 to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor zymeth25

    (@zymeth25)

    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 to change the widths on smaller screens
    Thread Starter birdseeding

    (@birdseeding)

    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

    (@zymeth25)

    Thanks, much appreciated! You can post a review 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.