I have a unordered list containing product information as list items. My goal is to hide the list items that do not fit on a single line based on the screen size.
Therefore, the number of products displayed should adjust depending on how many can fit on a single line, which in turn relies on the user's screen size.
Here is how I envision it:
This is the current appearance:
How can I achieve this? Can it be done using just HTML/CSS or will I need to incorporate JS/JQuery?
JSFiddel:
http://jsfiddle.net/narzero/5v3jL4wx/
HTML:
<body>
<div class="content_panel active">
<ul class="unstyled items_board">
<!-- VEGETABLES - FRUITS - POTATOES -->
<li class="item_header">VEGETABLES - FRUITS - POTATOES</li>
<!-- One -->
<li class="item ">
<div class="media">
<img src="http://goo.gl/6KJFwk" alt="One">
<div class="info_group">
<span class="price_info"><button class="btn btn_price">€2.03</button></span>
<span class="add_button"><button class="btn btn_success">Add</button></span>
</div>
</div>
<div class="item_info">
<div class="item_name item_row">
<span class="full_item_name">Aarts Frambozen op siroop</span>
<span class="item_size muted">370 ml</span>
</div>
</div>
</li>
<!-- Two -->
<li class="item ">
<div class="media">
<img src="http://goo.gl/A4IzmQ" alt="Two">
<div class="info_group">
<span class="price_info"><button class="btn btn_price">€2.63</button></span>
<span class="add_button"><button class="btn btn_success">Add</button></span>
</div>
</div>
<div class="item_info">
<div class="item_name item_row">
<span class="full_item_name">AH Aardappelen iets kruimig</span>
<span class="item_size muted">3 kg</span>
</div>
</div>
</li>
[...]
</ul>
</div>
CSS:
body {
background: #fcfcfc;
font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
}
/*==== Content panel ====*/
.content_panel .active {
display: inherit;
}
[...]