Layout elements are driving around.

Question

Hello. I have a card with the goods. There should be 4 of them in a row and as the screen size decreases, it should be 3-2-1. I did this (below, all that I managed to do in 2 days), but here the name of the product and the price, when compressed, overlap each other, go beyond the LI element. I understand this g *** coding, so I decided to ask here for help. I myself can not do it. Thank you in advance.

.wraper { overflow: hidden; } .wraper p { margin: 0; } .wraper ul { margin: 0; padding: 0; } .wraper li { list-style-type: none; display: inline-block; margin-left: 24px; float: left; margin: 1%; text-align: center; width: 23%; height: 290px; text-align: center; } .wraper li img { width: 100%; } .one { float: left; text-align: left; } .two { float: right; } /*========== Desktop First Method ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { .wraper li{ width: 29.33333%; } } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { .wraper li{ width: 46%; } } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { .wraper li{ width: 96%; } } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { }

 <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="wraper"> <ul > <li> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> </ul> </div> </div> </div> </div>

for me it’s necessary to list the lists in the lists and what should be shown to the blocks for the Caesar’s Caesar: clerk's mechanic
codepen.io/Geyan/pen/bZaQEQ?editors=110 and by the way, I didn’t try especially, see the example

Igor Kalinchuk Igor Kalinchuk 277 1 silver mark 5 bronze marks · Answer 1 · 2016-07-22T11:29:52

gray background remove only) something like a vskidku

 .wraper { overflow: hidden; } .wraper p { margin: 0; } .wraper ul { margin: 0; padding: 0; } .wraper li { list-style-type: none; float: left; margin: 20px 2%; text-align: center; width: 21%; text-align: center; background: #ccc; padding: 10px; box-sizing: border-box; } .wraper li img { width: 100%; } .product-image { text-align: center; } .wraper li:after { clear: both; content: ''; display: block; } .one { float: left; text-align: left; max-width: 60%; } .two { float: right; max-width: 40%; } /*========== Desktop First Method ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width: 1200px) {} /* Medium Devices, Desktops */ @media only screen and (max-width: 992px) { .wraper li { width: 29%; } } /* Small Devices, Tablets */ @media only screen and (max-width: 768px) { .wraper li { width: 46%; } } /* Extra Small Devices, Phones */ @media only screen and (max-width: 480px) { .wraper li { width: 96%; } } /* Custom, iPhone Retina */ @media only screen and (max-width: 320px) {}

 <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="wraper"> <ul> <li> <div class="product-image"> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> </div> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <div class="product-image"> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> </div> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <div class="product-image"> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> </div> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <div class="product-image"> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> </div> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <div class="product-image"> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> </div> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <div class="product-image"> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> </div> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <div class="product-image"> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> </div> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <div class="product-image"> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> </div> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> <li> <div class="product-image"> <img src="http://i066.radikal.ru/1607/48/796fa111ef2b.png" alt=""> </div> <div class="one"> <span>LedCross</span> <p>Низкие "Белые"</p> </div> <div class="two"> <span>1399 грн</span> <p>1599 грн</p> </div> </li> </ul> </div> </div> </div> </div>

Layout elements are driving around.

1 answer 1

More articles: