ExpressionEngine Layout Issue - HTML
How Do I?
Good morning, powers that be! I’m having a bit of an HTML issue in ExpressionEngine w/ Exp:esso Store that I’m hoping you can help me sort out. I’m sure it’s a simple answer, but I’m not seeing it.
I have a product page (using Exp:resso Store) that I’m attempting to update with a new design to match the rest of the website. I’m using THIS grid.css , and while it works beautifully for my categories page (which has this brand new layout applied to it), it’s not working for the product listings page:
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* GROUPING ============================================================================= */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
/* GRID COLUMN SETUP ==================================================================== */
.col2 {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
text-align: center;
background-color: #FFF;
border-radius: .5em;
height: 220px;
}
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
text-align: center;
}
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
/* GRID OF FOUR ============================================================================= */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.6%;
}
.span_2_of_4 {
width: 49.2%;
}
.span_1_of_4 {
width: 23.8%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 100%;
}
.span_2_of_4 {
width: 100%;
}
.span_1_of_4 {
width: 100%;
}
}And here is the code for that section on the page:
{exp:store:search orderby="category" sort="asc"}
{exp:store:product entry_id="{entry_id}"}
{if count % 4 == 1}
<div class="section group" reveal-fx="RevealFX17">
{/if}
<div class="col span_1_of_4">
<h2><a href="http://{url_title_path=shoppe/product}">{title}</a></h2>
{product_image}
{if on_sale}
<del>{regular_price}</del>
{price}
<span class="label label-success">Save {you_save} ({you_save_percent}%)</span>
{if:else}
{price}
{/if}
<a href="http://{url_title_path=%27shoppe/product%27}" class="btn">Info/Purchase</a>
</div>
{if count % 4 == 0 || count == total_results}
</div>
{/if}
{/exp:store:product}
{/exp:store:search}This is the exact same grid CSS that I use on other pages to achieve what I’m trying to make happen here, and it works just fine. When applied here, however, it just doesn’t work. I just don’t know if this is a basic html thing or something that I need to change within the plugin, or what have you. I’ve tried adding a linear conditional, changing the image sizes, removing the RevealFX, re-arranging the code, etc. None of this changes the fact that the page (found HERE) is displaying them stacked down the page instead of in rows of 4 products per row, which is what I’m going for. As far as I can see, there’s no conflicting CSS, as it would render on the category page I created, so I’m stumped for sure. Advice appreciated! 😊 Thanks folks!