Hide list-item based on screen size

Hi WPMU Dev's!

On my website: bloggerspoint.dk - I have a toplist in the right sidebar. The problem is, that is it too long for smaller screen sizes, and too short for larger screen sizes. It fit perfectly on my MacBook 15", but if a user visits from an iPad, the list is way to long.

So: Is it possible to to hide/add list-element based on the screen size, so it always will fit perfectly? I know it is possible, but i can't find any solution.

  • Luís

    Hi Matti ,

    Hope you're doing well today!

    If I understood well your question, you want to limit the number of items based in the screen size, so, I am not sure if is the best solution, but you can control it using CSS and media queries:

    I.E

    @media only screen and (max-width: 500px) {
    
    	.topList ol li:nth-of-type(n+4) {
       	 	display: none;
    	}
    }

    In this example, if the viewport is above 500px, it will only show 3 items, the fourth item and the followings will be hidden.

    http://www.w3schools.com/cssref/sel_nth-of-type.asp

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

    • Matti

      Thank you, it worked! I applied the following CSS, and now it looks great on every device and screen size.

      @media only screen and (min-width: 480px) and (max-width:530px) {
      
      	.topList ol li:nth-of-type(n+12) {
         	 	display: none;
      	}
      }
      @media only screen and (min-width: 530px) and (max-width:570px) {
      
      	.topList ol li:nth-of-type(n+13) {
         	 	display: none;
      	}
      }
      @media only screen and (min-width: 570px) and (max-width:600px) {
      
      	.topList ol li:nth-of-type(n+14) {
         	 	display: none;
      	}
      }
      @media only screen and (min-width: 600px) and (max-width:640px) {
      
      	.topList ol li:nth-of-type(n+15) {
         	 	display: none;
      	}
      }
      @media only screen and (min-width: 1230px) and (max-width:1310px) {
      
      	.topList ol li:nth-of-type(n+15) {
         	 	display: none;
      	}
      }
      @media only screen and (min-width: 1180px) and (max-width:1230px) {
      
      	.topList ol li:nth-of-type(n+14) {
         	 	display: none;
      	}
      }
      @media only screen and (min-width: 1100px) and (max-width:1180px) {
      
      	.topList ol li:nth-of-type(n+13) {
         	 	display: none;
      	}
      }
      @media only screen and (min-width: 1024px) and (max-width:1100px) {
      
      	.topList ol li:nth-of-type(n+12) {
         	 	display: none;
      	}
      }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.