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
Search our site
 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 Equal height Product Grid rows EASY using FLEXBOX
Next Page
Author    Topic »
Page: of 2

ITZAP
Ecommerce Template Expert

Australia
952 Posts

Posted - 05/08/2017 :  18:07:05  
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

Edited by - ITZAP on 08/18/2022 19:15:53

ITZAP
Ecommerce Template Expert

Australia
952 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
952 Posts

Posted - 05/08/2017 :  19:30:55  
Post now obsolete. Scroll down and read AUGUST 2022 UPDATE.

Edited by - ITZAP on 08/18/2022 21:41:41

ITZAP
Ecommerce Template Expert

Australia
952 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
952 Posts

Posted - 05/29/2017 :  20:34:04  
Post now obsolete. Scroll down and read AUGUST 2022 UPDATE.

Edited by - ITZAP on 08/18/2022 21:42:17

dbdave
ECT Moderator

USA
9595 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
ECT Moderator

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
9595 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
160 Posts

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
952 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
160 Posts

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

atlend
Advanced Member

USA
318 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
952 Posts

Posted - 04/10/2019 :  19:15:54  
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

Edited by - ITZAP on 08/18/2022 22:03:45

ITZAP
Ecommerce Template Expert

Australia
952 Posts

Posted - 08/18/2022 :  21:32:51  
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

Edited by - ITZAP on 08/18/2022 21:47:20

Vince
Administrator

41496 Posts

Posted - 08/19/2022 :  02:19:44  

Sinbad
ECT Moderator

USA
65936 Posts

Posted - 08/19/2022 :  12:36:22  
Hi Gary, thanks for sharing

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

midvalleydrifter001
Ecommerce Template Expert

USA
788 Posts

Posted - 08/20/2022 :  21:48:10  
Excellent work Gary and thanks for sharing.

I tweaked it some to fit my website

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

Patrick

Vince
Administrator

41496 Posts

Posted - 08/21/2022 :  02:59:06  
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

ITZAP
Ecommerce Template Expert

Australia
952 Posts

Posted - 08/21/2022 :  03:36:47  
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:

// ZERO PRICE
$xxPrice=''; // Remove the label for Price, not necessary
$pricezeromessage='<span style="display: none">0</span>'; // If Price entered is $0.00, then hide the entire line

// LIST PRICE SPECIALS
$GLOBALS['xxListPrice']='<div class="wasprice">%s</div>';
$yousavetext='<div class="saveprice">SAVE %s</div>';

= = = = = = = = = =

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

div.reviewstarsheader {
display: block;
line-height: 1;
margin: 0;
padding: 0;
}

div.largereviewstars svg.icon,
div.smallreviewstars svg.icon {
display: inline-block;
vertical-align: text-bottom;
fill: #f26522;
}

div.largereviewstars svg.icon {
width: 1.2em;
height: 1.2em;
}
@media print, screen and (min-width: 40em) {
div.largereviewstars svg.icon {
width: 1.25em;
height: 1.25em;
}
}
@media print, screen and (min-width: 64em) {
div.largereviewstars svg.icon {
width: 1.3em;
height: 1.3em;
}
}

div.smallreviewstars svg.icon {
width: 1.1em;
height: 1.1em;
}

But that is off topic; you decide.

Gary

Edited by - ITZAP on 08/21/2022 17:46:53

Vince
Administrator

41496 Posts

Posted - 08/29/2022 :  10:00:58  
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

ITZAP
Ecommerce Template Expert

Australia
952 Posts

Posted - 08/30/2022 :  00:04:18  
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:

$GLOBALS['xxQuiBuy']='Quick Buy #xf2d2';

(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:

[DOM] Found 2 elements with non-unique id #ectaddcart0: (More info: https://goo.gl/9p2vKq)

Regards,

Gary
Page: of 2    Topic »  
Next Page
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000