Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?



Find us on Facebook

Follow us on Twitter

View our YouTube channel


 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 Equal height Product Grid rows EASY using FLEXBOX
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

ITZAP
Ecommerce Template Expert

Australia
755 Posts

Posted - 05/08/2017 :  18:07:05  
So your Product Page Grid has containers with differing heights and looks much like this ...



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



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

Edited by - ITZAP on 08/30/2017 03:31:54

ITZAP
Ecommerce Template Expert

Australia
755 Posts

Posted - 05/08/2017 :  18:34:37  
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 !

Edited by - ITZAP on 05/29/2017 20:42:28

ITZAP
Ecommerce Template Expert

Australia
755 Posts

Posted - 05/08/2017 :  18:45:18  
FLEX GRID parent outer container for categories.php/.asp and products.php/.asp

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
}


Edited by - ITZAP on 05/29/2017 19:40:22

ITZAP
Ecommerce Template Expert

Australia
755 Posts

Posted - 05/08/2017 :  19:17:56  
FLEX GRID individual child containers in responsive auto-height rows for menu categories, products, recommended & related.

The media query breakpoints in EM are what I use (from ZURB Foundation). Work well, but edit if you want.

If you do not wish to extend out to 4 columns wide, then simply exclude the red bit down bottom.

--------------------

/* 1 column : Small iPhone mobile portrait orientation, leaving finger swipe margins each side */

div.categories>div.category,
div.products>div.product,
div.csproducts>div.csproduct
{
box-sizing: border-box;
-ms-flex: 0 0 90%;
flex: 0 0 90%;
max-width: 400px;
position: relative;
text-align: center;
background-color: #fff;
border: 1px solid #ccc;
margin: 0 0 1.5rem 0
}


/* 2 columns : Small iPhone mobile landscape, iPad portrait */

@media print, screen and (min-width:40em) {
div.categories>div.category,
div.products>div.product,
div.csproducts>div.csproduct
{
-ms-flex: 0 0 46.5%;
flex: 0 0 46.5%
}
}


/* 3 columns : iPad landscape, Laptop PC */

@media screen and (min-width:40em) and (orientation:landscape) {
div.categories>div.category,
div.products>div.product,
div.csproducts>div.csproduct
{
-ms-flex: 0 0 31.5%;
flex: 0 0 31.5%
}
}

@media print, screen and (min-width:64em) {
div.categories>div.category,
div.products>div.product,
div.csproducts>div.csproduct
{
-ms-flex: 0 0 31.5%;
flex: 0 0 31.5%
}
}


/* 4 columns (Optional) : Desktop PC full HD extra-large screen */

@media screen and (min-width:75em) {
div.categories>div.category,
div.products>div.product,
div.csproducts>div.csproduct
{
-ms-flex: 0 0 23.5%;
flex: 0 0 23.5%
}
}

@media screen and (min-width:75em) and (orientation:landscape) {
div.categories>div.category,
div.products>div.product,
div.csproducts>div.csproduct
{
-ms-flex: 0 0 23.5%;
flex: 0 0 23.5%
}
}

Edited by - ITZAP on 05/29/2017 20:02:11

ITZAP
Ecommerce Template Expert

Australia
755 Posts

Posted - 05/08/2017 :  19:30:55  
I do like having "Products" and "Recommended / Related" items displayed in 4 columns on extra-large screens.

But I don't want my Menu Categories to extend 4 columns wide !

OK then ... simply add this override to restore Categories to 3 columns max.

--------------------

/* 3 column override for Categories : Desktop PC full HD extra-large screen */

@media screen and (min-width:75em) {
div.categories>div.category {
-ms-flex: 0 0 31.5%;
flex: 0 0 31.5%
}
}

@media screen and (min-width:75em) and (orientation:landscape) {
div.categories>div.category {
-ms-flex: 0 0 31.5%;
flex: 0 0 31.5%
}
}

Edited by - ITZAP on 05/29/2017 20:11:45

ITZAP
Ecommerce Template Expert

Australia
755 Posts

Posted - 05/08/2017 :  19:50:25  
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.

Edited by - ITZAP on 05/08/2017 20:34:17

ITZAP
Ecommerce Template Expert

Australia
755 Posts

Posted - 05/29/2017 :  20:34:04  
Here are some simple mouse hover effects for categories, products, recommended & related.

The container :

div.categories>div.category:hover,
div.products>div.product:hover,
div.csproducts>div.csproduct:hover
{
border: 1px solid #600;
box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5)
}


The preview photo :

img.catimage:hover,
img.prodimage.allprodimages:hover,
img.csprodimage.allprodimages:hover
{
opacity: 0.8
}


The name, you will need to modify the #hex colors used here to suit your website :

div.catname a:hover,
div.prodname a:hover,
div.csprodname a:hover
{
color: #fff;
background-color: #600;
text-decoration: none
}


Gary

Edited by - ITZAP on 08/27/2017 17:28:35

dbdave
ECT Moderator

USA
7990 Posts

Posted - 08/27/2017 :  16:32:34  
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

Andy
Administrator

95440 Posts

Posted - 08/30/2017 :  00:06:25  
Thanks very much for posting Gary, I have made this a "sticky".

Andy

Please feel free to review / rate our software

dbdave
ECT Moderator

USA
7990 Posts

Posted - 09/25/2017 :  19:28:38  
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

Edited by - dbdave on 09/25/2017 19:31:07

pdraper
Advanced Member

New Zealand
157 Posts

Pre-sales questions only
(More Details...)

Posted - 06/17/2018 :  18:16:26  
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

Edited by - pdraper on 06/17/2018 18:27:57

ITZAP
Ecommerce Template Expert

Australia
755 Posts

Posted - 06/17/2018 :  18:41:58  
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

pdraper
Advanced Member

New Zealand
157 Posts

Pre-sales questions only
(More Details...)

Posted - 06/17/2018 :  18:57:59  
Hey Gary,

Sorry havent implemented your solution just yet.

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

Paul

Edited by - pdraper on 06/17/2018 19:04:31

chrismlandon
Advanced Member

USA
304 Posts

Posted - 04/10/2019 :  07:58:55  
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..

ITZAP
Ecommerce Template Expert

Australia
755 Posts

Posted - 04/10/2019 :  19:15:54  
At IT ZAP Website Design Works I build Templates using the ZURB Foundation CSS framework, recently updated to v6.5.3.
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 ZURB Foundation leads the way and is superior to Bootstrap.

For the Ecommerce Templates shopping cart pages, they will still use the "ectcart.css" layout, because ECT update that file regularly and occasionally add new CSS classes. This way it is much easier to stay current as new versions are released.
I may add a few CSS overrides to "ectcart.css", but that is a work in progress.

Gary
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000