responsive 3 column to 2 column to 1 column responsive php loop

[jonnyfreak]

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

@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;
}
}



<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.

[Beverleyh]

Sounds like the same logic as this: http://fofwebdesign.co.uk/template/_testing/filter/filter-multi-js.htm

If this is useful, view the source and pick it apart. The idea is that you'd set media query breakpoints to divide your content blocks/columns between;

- 20% = 5 per row,
- 25% = 4 per row,
- 33.333% = 3 per row,
- 50% = 2 per row,

Etc., less something for horizontal margins.

[jonnyfreak]

thats great. i managed to strip the code down and sort of get it working. i have just having trouble keeping the images large enough on a big screen. i have all the others sorted it just the large screen. just a bit of testing im sure

[jonnyfreak]

thanks that was a great help. i have managed to use the code with the following css. however on the largest screen i am getting three images across but they are not filling the screen i am getting large border either side. i have also getting rather large borders on the other sizes aswell.. i dont know if i have over complicated the css but this is what i have.


/*.filter-categories span { display:inline-block; padding:0.25em 0; white-space:nowrap }
.filter-text, .filter-label { font-size:0.75em }*/
.filter-label { margin-right:1em; padding:0.35em 0.5em; background:#ddd; border-radius:0.25em }
.filter-wrap {
display:-webkit-flexbox;
display:-ms-flexbox;
display:flex;
flex-wrap:wrap;
position:relative;
overflow:hidden;
font-size:0.9375em;
margin-top: 1.5em;
margin-right: -0.75%;
margin-bottom: 2em;
margin-left: -0.75%;
}
.filter-item { display:-webkit-flexbox; display:-ms-flexbox; display:flex; flex-direction:column; /*was46.5%*/width:46.5%; padding:0.75% 1%; margin:0.75vw 0.75%; text-align:center; color:#fff }
.filter-item span { display:block; text-align:left; /*font-size:0.875em; color:#ccc; padding-right:5%*/ text-decoration:none }
.filter-item b { display:block; font-size:0.9375em; margin:1em 0 0.5em }
.filter-item b:before, .filter-item b:after { content:'~'; font-weight:normal }
.filter-item p { font-size:0.75em; color:#ccc; -webkit-flex:1 0 auto; -ms-flex:1 0 auto; flex:1 0 auto }
.filter-item i { font-size:0.9375em; font-weight:bold; margin-top:0.25em; }
.filter-item ul { list-style-type:none; margin-left:0; margin-top:2em; padding:0; font-size:0.75em; color:#000 }
.filter-item li { display:inline-block; line-height:2; padding:0 2%; border-radius:0.25em }


.filtered-inclusive .filter-item, .filtered-exclusive .filter-item, .filter-no-item { display:none } /* filtered-inclusive/filtered-exclusive class applied via js */
.filtered-inclusive .filter-item.selected, .filtered-exclusive .filter-item:not(.selected) { display:-webkit-flexbox; display:-ms-flexbox; display:flex } /* selected class applied via js */
.filter-no-item.filter-no-item-active { display:block; width:100%; background:#fcc; color:red; padding:1em 1.5em; margin:0.75% }
.filter-mask-active { position:absolute; top:0; left:0; bottom:0; right:0; -webkit-animation:filterMask 1s ease-in-out both; animation:filterMask 1s ease-in-out both }
@-webkit-keyframes filterMask {
0% { background:transparent }
50% { background:#fff }
100% { background:transparent }
}
@keyframes filterMask {
0% { background:transparent }
50% { background:#fff }
100% { background:transparent }
}
@media(min-width:10em) {
.filer-item { float:none }
.filter-item { width:99.75% }/*width:29.75%*/
}

@media(min-width:30em) {
.filer-item { float:none }
.filter-item { width:99.75% }/*width:29.75%*/
}

@media(min-width:40em) {
.filter-text, .filter-label, .filter-wrap { font-size:0.875em }
.filter-item { width:38.75% }/*width:29.75%*/
}

@media(min-width:56em) {
.filter-text, .filter-label, .filter-wrap { font-size:1em }
.filter-item { width:28.25% }/*width:21.5%....width:28.25%*/

@media(min-width:64em) {
.filter-item { margin:0.5em 0.75%; width:25% }
}

[Beverleyh]

If you post a link to your demo, it will be easier to see what's going on. You can use something like JSBin, CodePen or JSFiddle.

[jonnyfreak]

If you post a link to your demo, it will be easier to see what's going on. You can use something like JSBin, CodePen or JSFiddle.

hello i hope this what you mean

https://jsfiddle.net/xe1me3yd/

i have also got a responsive menu on the page that might be causing this issue. i got the menu from http://purecss.io/layouts/side-menu/

[jonnyfreak]

i figured it out. it was some other css on the page from the responsive columns. thanks for your help