responsive 3 column to 2 column to 1 column responsive php loop
i have a page showing multiple images. currently i have the items in two columns that when the screen is resized they go into one column
css
Code:
@charset "utf-8";
/* CSS Document */
.productLeft {
width: 100%;
background-size: contain;
background-repeat:no-repeat;
height: 450px;
}
.productLeft:hover{
opacity: .6;
}
.soldoutLeft {
height: 100px;
width: 50%;
padding-right: 50%;
}
.priceLeft {
padding-top: 80%;
}
.productRight {
width: 100%;
background-size: contain;
background-repeat:no-repeat;
height: 450px;
}
.productRight:hover{
opacity: .6;
}
.soldoutRight {
height: 100px;
width: 50%;
padding-right: 50%;
}
.priceRight {
padding-top: 80%;
}
.left {
float: left;
margin-top: 20px;
text-decoration: none;
margin-right: 5%;
width: 45%;
}
.leftDet {
float: left;
margin-top: 40px;
text-decoration: none;
margin-right: 5%;
width: 55%;
}
.right {
float: right;
margin-top: 20px;
margin-right: 5%;
width: 45%;
text-align: right;
}
.rightProdCont {
float: right;
margin-top: 20px;
margin-right: 5%;
width: 45%;
text-align: right;
height: 500px;
background-size: cover;
}
.prodRight {
width: 100%;
vertical-align: bottom;
}
.rightDet {
float: right;
margin-top: 40px;
margin-right: 5%;
width: 35%;
}
.group:after {
content:"";
display: table;
clear: both;
}
.group {
width: 100%;
}
#layout #main .content #products {
width: 100%;
margin-top: 30px;
}
img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 480px) {
.left,
.right {
float: none;
width: auto;
}
}
PHP Code:
<div class="group">
<div class="left">
<?php do { ?>
<a href="product-detail.php?ItemID=<?php echo $row_rsCatLeft['ItemID']; ?>"><div class="productLeft" style="background-image:url('../images/AW16/<?php echo $row_rsCatLeft['Image']; ?>')"><br>
<div class="soldoutLeft">
<?php if ($row_rsCatLeft['OutOfStock'] == 1): ?>
<img src="../images/sold-out.png" alt="sold out" width="100" height="100" align="right" />
<?php endif;?>
</div>
<div class="priceLeft">
<div align="right">£ <?php echo $row_rsCatLeft['Price']; ?></div>
</div>
</div></a>
<?php } while ($row_rsCatLeft = mysql_fetch_assoc($rsCatLeft)); ?>
</div>
<div class="right">
<?php do { ?>
<a href="product-detail.php?ItemID=<?php echo $row_rsCatRIght['ItemID']; ?>"><div class="productRight" style="background-image:url('../images/AW16/<?php echo $row_rsCatRIght['Image']; ?>')"><br>
<div class="soldoutRight"><?php if ($row_rsCatRIght['OutOfStock'] == 1): ?><img src="../images/sold-out.png" alt="sold out" width="100" height="100" align="right" /><?php endif;?></div>
<div class="priceRight">£ <?php echo $row_rsCatRIght['Price']; ?></div>
</div></a>
<?php } while ($row_rsCatRIght = mysql_fetch_assoc($rsCatRIght)); ?>
</div>
but what i want to do is be able to ideally have a many columns wide as the screen allows then as the screen downscales the columns get less.
so i presume this will all be done with the css. i will have one div with a class and a do loop but i dont know how to go about it. any advice is greatly appreciate.
