Since I thought you might be interested, here is the responsive grid portion of the CSS the ecommerce site page links to. I think you may have ended up hardcoding the widths; however, as I believe the “column” class in the HTML was meant to be “col”. Regardless, the result we come up with will be much simpler. Stuff like this below is not really something one types out themselves, it is built into the templating system the site uses.
/**
* responsive.css
*
* @package templateSystem
* @copyright Copyright 2003-2016 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @author ZCAdditions.com, ZCA Responsive Template Default
* @version $Id: picaflor-azul Wed Jan 13 18:44:28 2016 -0500 New in v1.5.5 $
*/
/* This is used to re-size images */
img{max-width:100%;height:auto;border:0;}
/* Added for responsive view () */
.leftBoxContainer, .rightBoxContainer {width:auto !important;
}
/* No reason to edit the below pixel calculations */
[class*="col"]{float:left;margin-left:5px;}
.col10{width:10px;}.col20{width:25px;}.col30{width:40px;}.col40{width:55px;}.col50{width:70px;}.col60{width:85px;}.col70{width:100px;}.col80{width:115px;}.col90{width:130px;}.col100{width:145px;}.col110{width:160px;}.col120{width:175px;}.col130{width:190px;}.col140{width:205px;}.col150{width:220px;}.col160{width:235px;}.col170{width:250px;}.col180{width:265px;}.col190{width:280px;}.col200{width:295px;}.col210{width:310px;}.col220{width:325px;}.col230{width:340px;}.col240{width:355px;}.col250{width:370px;}.col260{width:385px;}.col270{width:400px;}.col280{width:415px;}.col290{width:430px;}.col300{width:445px;}.col310{width:460px;}.col320{width:475px;}.col330{width:490px;}.col340{width:505px;}.col350{width:520px;}.col360{width:535px;}.col370{width:550px;}.col380{width:565px;}.col390{width:580px;}.col400{width:595px;}.col410{width:610px;}.col420{width:625px;}.col430{width:640px;}.col440{width:655px;}.col450{width:670px;}.col460{width:685px;}.col470{width:700px;}.col480{width:715px;}.col490{width:730px;}.col500{width:745px;}.col510{width:760px;}.col520{width:775px;}.col530{width:790px;}.col540{width:805px;}.col550{width:820px;}.col560{width:835px;}.col570{width:850px;}.col580{width:865px;}.col590{width:880px;}.col600{width:895px;}.col610{width:910px;}.col620{width:925px;}.col630{width:940px;}.col640{width:955px;}.col650{width:970px;}.col660{width:985px;}.col670{width:1000px;}.col680{width:1015px;}.col690{width:1030px;}.col700{width:1045px;}.col710{width:1060px;}.col720{width:1075px;}.col730{width:1090px;}.col740{width:1105px;}.col750{width:1120px;}.col760{width:1135px;}.col770{width:1150px;}.col780{width:1165px;}.col790{width:1180px;}.col800{width:1195px;}.col810{width:1210px;}.col820{width:1225px;}.col830{width:1240px;}.col840{width:1255px;}.col850{width:1270px;}.col860{width:1285px;}.col870{width:1300px;}.col880{width:1315px;}.col890{width:1330px;}.col900{width:1345px;}.col910{width:1360px;}.col920{width:1375px;}.col930{width:1390px;}.col940{width:1405px;}.col950{width:1420px;}.col960{width:1435px;}.col970{width:1450px;}.col980{width:1465px;}
/* No reason to edit below percentage calculations */
.onerow-fluid{margin:0 auto !important;width:100%;}
.onerow-fluid:before,
.onerow-fluid:after{display:table;content:"";}
.onerow-fluid:after{clear:both;}
.onerow-fluid>[class*="col"]{float:left;margin-left:0.5208%;}
.onerow-fluid>[class*="col"]:first-child{margin-left:0%;margin-right: 0.4208%;}
.onerow-fluid>[class*="col"]:nth-child(3){float:right;margin-right:0;}
.onerow-fluid>.col10{width:0.6826%;}.onerow-fluid>.col20{width:1.7065%;}.onerow-fluid>.col30{width:2.7304%;}.onerow-fluid>.col40{width:3.7543%;}.onerow-fluid>.col50{width:4.7782%;}.onerow-fluid>.col60{width:5.802%;}.onerow-fluid>.col70{width:6.8259%;}.onerow-fluid>.col80{width:7.8498%;}.onerow-fluid>.col90{width:8.8737%;}.onerow-fluid>.col100{width:9.8976%;}.onerow-fluid>.col110{width:10.9215%;}.onerow-fluid>.col120{width:11.9454%;}.onerow-fluid>.col130{width:12.9693%;}.onerow-fluid>.col140{width:13.9932%;}.onerow-fluid>.col150{width:15.0171%;}.onerow-fluid>.col160{width:16.041%;}.onerow-fluid>.col170{width:17.0648%;}.onerow-fluid>.col180{width:18.0887%;}.onerow-fluid>.col190{width:19.1126%;}.onerow-fluid>.col200{width:20.1365%;}.onerow-fluid>.col210{width:21.1604%;}.onerow-fluid>.col220{width:22.1843%;}.onerow-fluid>.col230{width:23.2082%;}.onerow-fluid>.col240{width:24.2321%;}.onerow-fluid>.col250{width:25.256%;}.onerow-fluid>.col260{width:26.2799%;}.onerow-fluid>.col270{width:27.3038%;}.onerow-fluid>.col280{width:28.3276%;}.onerow-fluid>.col290{width:29.3515%;}.onerow-fluid>.col300{width:30.3754%;}.onerow-fluid>.col310{width:31.3993%;}.onerow-fluid>.col320{width:32.4232%;}.onerow-fluid>.col330{width:33.4471%;}.onerow-fluid>.col340{width:34.471%;}.onerow-fluid>.col350{width:35.4949%;}.onerow-fluid>.col360{width:36.5188%;}.onerow-fluid>.col370{width:37.5427%;}.onerow-fluid>.col380{width:38.5666%;}.onerow-fluid>.col390{width:39.5904%;}.onerow-fluid>.col400{width:40.6143%;}.onerow-fluid>.col410{width:41.6382%;}.onerow-fluid>.col420{width:42.6621%;}.onerow-fluid>.col430{width:43.686%;}.onerow-fluid>.col440{width:44.7099%;}.onerow-fluid>.col450{width:45.7338%;}.onerow-fluid>.col460{width:46.7577%;}.onerow-fluid>.col470{width:47.7816%;}.onerow-fluid>.col480{width:48.8055%;}.onerow-fluid>.col490{width:49.8294%;}.onerow-fluid>.col500{width:50.8532%;}.onerow-fluid>.col510{width:51.8771%;}.onerow-fluid>.col520{width:52.901%;}.onerow-fluid>.col530{width:53.9249%;}.onerow-fluid>.col540{width:54.9488%;}.onerow-fluid>.col550{width:55.9727%;}.onerow-fluid>.col560{width:56.9966%;}.onerow-fluid>.col570{width:58.0205%;}.onerow-fluid>.col580{width:59.0444%;}.onerow-fluid>.col590{width:60.0683%;}.onerow-fluid>.col600{width:61.0922%;}.onerow-fluid>.col610{width:62.116%;}.onerow-fluid>.col620{width:63.1399%;}.onerow-fluid>.col630{width:64.1638%;}.onerow-fluid>.col640{width:65.1877%;}.onerow-fluid>.col650{width:66.2116%;}.onerow-fluid>.col660{width:67.2355%;}.onerow-fluid>.col670{width:68.2594%;}.onerow-fluid>.col680{width:69.2833%;}.onerow-fluid>.col690{width:70.3072%;}.onerow-fluid>.col700{width:71.3311%;}.onerow-fluid>.col710{width:72.3549%;}.onerow-fluid>.col720{width:73.3788%;}.onerow-fluid>.col730{width:74.4027%;}.onerow-fluid>.col740{width:75.4266%;}.onerow-fluid>.col750{width:76.4505%;}.onerow-fluid>.col760{width:77.4744%;}.onerow-fluid>.col770{width:78.4983%;}.onerow-fluid>.col780{width:79.5222%;}.onerow-fluid>.col790{width:80.5461%;}.onerow-fluid>.col800{width:81.57%;}.onerow-fluid>.col810{width:82.5939%;}.onerow-fluid>.col820{width:83.6177%;}.onerow-fluid>.col830{width:84.6416%;}.onerow-fluid>.col840{width:85.6655%;}.onerow-fluid>.col850{width:86.6894%;}.onerow-fluid>.col860{width:87.7133%;}.onerow-fluid>.col870{width:88.7372%;}.onerow-fluid>.col880{width:89.7611%;}.onerow-fluid>.col890{width:90.785%;}.onerow-fluid>.col900{width:91.8089%;}.onerow-fluid>.col910{width:92.8328%;}.onerow-fluid>.col920{width:93.8567%;}.onerow-fluid>.col930{width:94.8805%;}.onerow-fluid>.col940{width:95.9044%;}.onerow-fluid>.col950{width:96.9283%;}.onerow-fluid>.col960{width:97.9522%;}.onerow-fluid>.col970{width:98.9761%;}.onerow-fluid>.col980{width:100%;}
I may have misplaced a closing div tag; but, the general structure used for the rows was like this:
<div class="row" style="">
<div align="center">
<div class="column">
<a><img></a><br>
<div><a>Soft Felt Clip Pads for Paddleback Clips</a><br></div>
</div>
</div>
<div class="column">
<div align="center">
<a><img></a><br>
<div><a>Adhesive Soft Pads for Clip-on Earrings</a><br></div>
</div>
</div>
<div class="column">
<div>
<a><img></a><br>
<div><a>Soft Pads for Mini-Clip Paddleback</a><br><br><br></div>
</div>
</div>
<br class="clearBoth">
And we can lose most of that with CSS since it looks like some of the divs are from a “what you see is what you get” editor (that would add a div around something to center text, for example).
I have been piddling on my iPad. I will holler when I have piddled from my desktop as it is much easier to play with CSS for a page (live, client-side) to see what does what.
Update: So I messed around on my phone instead. Something quick and dirty (actually, probably just quick) you can stick in as custom CSS by clicking the “Edit CSS” button in the “Design” screen. Works for my iPhone 12 mini in portrait (I forced them single file so they aren’t tiny) and landscape (should be grid of three). Hopefully I didn’t add something in the file I was using to preview that I am leaving out here.
Up next would be seeing what they look like on a larger screen.
.column {
float: left;
padding-bottom: 0.5em;
width: 32%;
max-width: 240px; /* this is the hard coded image size in the HTML */
margin: auto;
}
.clearboth {
clear: both;
}
.row {
clear: both;
}
footer.footer {
padding: 35px 0 60px 0;
clear: both;
}
footer.post__footer {
clear: both;
}
@media screen and (max-width: 540px) {
.column {
float: none;
width: auto;
}
}
Another update: Just occurred to me that the way I tested it on my phone bypassed whatever CSS is used on the Micro.blog page. I don’t think that will matter but holler if you try this out and it still looks wrong.
- by the way, the same thing is happening on