So your Product Page Grid has containers with differing heights.

But what you really want is for all the containers in each row to be exactly the same height.

And to achieve that, what you did is increase the xxx pixel height of the container to suit, using CSS basically like this ...

div.product {
width: 30%;
height: 450px;
float: left;
}

Well, your ultimate solution is called FLEXBOX using pure CSS, no javascript, no floats, no fixed height, and you will not believe how easy it is !

Gary

What we will do is use Flexbox CSS Grids to create containers for Categories, Products and Recommended / Related items that are:

> Equal in height across each individual row, automatically adjusted according to the tallest container in each row.
> Responsive width media queries defined in % percentages according to screen size.

1 column : Small iPhone mobile portrait orientation.
2 column : Small iPhone mobile landscape, iPad portrait.
3 column : iPad landscape, Laptop PC.
4 column : Desktop PC full HD extra-large screen.

To start off, I think it is important to spend just a little time getting a basic understanding of how Flexbox works, and what all the different settings are.
It is actually nothing new. There are stacks of webpages containing tutorials and heaps of YouTube videos.

Personally, I found these very helpful :

> CSS tricks (great website), A Complete Guide to Flexbox >>

> DevTips, Travis Neilson (clever guy), You Tube video CSS FlexBox Essentials >>

Check those out and ... well, well ... let's do it !

Post now obsolete. Scroll down and read AUGUST 2022 UPDATE.

So there is sample FLEXBOX Grid CSS you can use to layout your Ecommerce Templates "Category" and "Product" pages.

On some websites you may have to make a few alterations to suit your particular layout, especially depending upon the max width available for the parent outer container (div.categories, div.products, div.csproducts).

But this should give you the basic idea.

Now you can add whatever you like inside the individual child containers using includes.php parameter like:

// CUSTOM LAYOUT for products.php
$productpagelayout='productimage, productname, listprice, discounts, price, reviewstars, description, addtocart';

and the height of the row will grow automatically to suit ... magic

You will find Flexbox extremely useful for many other purposes, like Navbars and Forms. Give floats the flick. Use Flexbox to solve size issues and make horizontal and vertical alignment painless.

Gary


This tip was not written by a thin man.

Post now obsolete. Scroll down and read AUGUST 2022 UPDATE.

Can we get this made a sticky so it doesn't go away?
I am testing this out and it's pretty amazing.
Thanks Gary for posting.

David
ECT Power User

Thanks very much for posting Gary, I have made this a "sticky".

Andy

Please feel free to review / rate our software

Flexbox is perfect for your social medial buttons

On this page, https://www.ecommercetemplates.com/help/social-media.asp
this is the recommended .css

div.socialmediabuttons{margin:10px 8px;background:#fff;width:94%;float:left;padding:4px;}

The css for the individual buttons uses something like this

div.socialmediabutton{float:left;display:inline-block;padding:6px;}
div.socialaskaquestion{margin-top:1px;}
div.sociallinkedin{margin-top:9px}
div.socialfacebook{margin-top:9px}
div.socialtwitter{margin-top:9px}
div.socialgoogle{margin-top:6px}
div.socialpinterest{margin-top:9px}
div.socialcustom{margin-top:8px}

But we can center those various height buttons easily with flexbox without all the need for margin height adjustments on each button, and if you shorten the width, they will wrap and stay perfectly centered without readjusting the margins and floats.
try this
div.socialmediabuttons{margin:5px; width:94%; float:left; display:flex; justify-content:center; align-items:center; flex-wrap:wrap}
div.socialmediabutton{padding:4px;}

Adjust the width there to fit in your space and the buttons will align like magic.


David
ECT Power User

Thanks guys for the info.

One other issue now is that if you look at the same page the 3rd row starts at the right for some reason

Paul

Paul, what URL to look at?
"justify-content" determines alignment of a new row. Refer to the Flexbox article >>

div.categories, div.products, div.csproducts {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: start;
align-content: flex-start;
padding: 0;
margin: 0
}

Gary

Hey Gary,

Sorry havent implemented your solution just yet.

But page is demo.managemyweb.nz/products.asp?cat=15

Paul

I've implemented flexbox and found it very easy. Would be interested to see if you have any tips on using the css grid properties to do some more advanced layouts of product pages or even the checkout process. Not sure if you have used that property in any of the projects that you do or if it is just flexbox..

At I.T.ZAP Website Design Works I build Templates using the Foundation Sites Responsive Framework.
New websites are now designed using the more advanced XY Grid, an upgraded version of FlexBox.
You can watch the XY Grid video here >>
In my opinion Foundation leads the way and is superior to Bootstrap.

For the Ecommerce Templates shopping cart pages, "ectcart.css" layouts have been modified to work with the Foundation Framework.

Gary

AUGUST 2022 UPDATE

I will share with the Ecommerce Templates User Community here latest CSS to create a Flexbox Mobile Friendly Responsive Grid for Categories and Products pages, because I believe it is undoubtedly the way to go.

No javascript, no floats, no min-height, no multiple CSS files for 2 - 3 - 4 column layouts.

Columns auto-expand and images resize to fit on small, medium, large, xlarge, xxlarge screens. Flexbox magic makes all Rows the same height. To see what it all looks like click here =>>

Click to download the file: categories-products-flexbox-grid.zip

Provided as is. Save a Backup Copy of your main website stylesheet first. Then Copy/Paste into your main website stylesheet, which needs to be loaded after ectcart.css. Yes, you may need to make some minor edits to the CSS to suit your website.

Gary

Hi Gary
Many thanks for sharing that!

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hi Gary, thanks for sharing

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

Excellent work Gary and thanks for sharing.

I tweaked it some to fit my website

https://www.slixprings.com/products.php?cat=1

Patrick

Hi Gary
Would you mind if I incorporated a version of this in the product layouts? Or do you prefer to keep it as a download from your website?

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hi Vince, I have shared it here now, so don’t mind if you wish to use it.

Note there are bits and pieces which I choose to hide (display: none). Others may not like that. But the CSS has /* comments throughout */ to explain.

FORGOT to mention ... In the includes.php config file, I have these entries:


= = = = = = = = = =

And the Review Stars ***** are now SVG Icons (nice) which look better in Orange #f26522, and I fiddled with the CSS sizing a bit ...

But that is off topic; you decide.

Gary

One of the really nice features of this is the "zoom" effect as the mouse goes over each product but there seems to be a problem with this and the Quick Buy popup. I was trying to use the Quick Buy rather than the Add to Cart as product options can put everything out of joint and for this to be of general use it has to allow for options.
So do you think, Gary? Should I remove the "zoom" effect maybe? It's a shame but I don't really see a way around this.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hi Vince,

quote:

---

there seems to be a problem with this and the Quick Buy popup

---

Yes, now I see the problem when the Quick Buy feature is activated. I had not tried it before.

=> Click to download the new CSS updated 30 August 2022: categories-products-flexbox-grid.zip

(1) Main alteration is at LINE 181 with the ZOOM on Hover Effects for divs category, product and csproduct.

It seems that using CSS "transform: scale" breaks "position: fixed" on the "div.qbopaque" Quick Buy pop-up window. However, interesting that "div.ectopaque" pop-up window (also position: fixed) opens just fine upon clicking "Add to Cart". (A mystery to be solved.)

(2) Anyway, without spending too much time on this, /* transform: scale(1.015); */ is now commented out of the Hover CSS. If you don't use Quick Buy, you can still use it if desired. But instead I used a darker grey for top & left border and increased the box-shadow effect. Visually similar on Hover. Quick Buy window issue solved.

(3) If you use Font Awesome v4.7 icons on shopping cart buttons, you may like fa-window-restore for Quick Buy button. includes.php file entry:


(4) Added additional CSS to HIDE the Quick Buy buttons on products.php and Home page index.php cross sell items when page is div.prodarticle or div.contact.

(5) Vince, Google Chrome Dev Tools is upset with you Multiple instances of:


Regards,

Gary