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/_...r-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