Image boxes on product page

Author	« Topic »
daringdiva Advanced Member 138 Posts	Posted - 04/29/2020 : 16:45:46 How would I make all product boxes the same size regardless of image height?
1818charlie ECT Moderator United Kingdom 1194 Posts	Posted - 04/29/2020 : 18:28:49 Hi This topic posted by Gary Flack at ITZAP may answer your question https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=107608 Steve Manchester England Remember - Any edits to the ectcart.css file will be overwritten by updater's. ALL edits to ectcart.css rules should be placed in your style.css file Edited by - 1818charlie on 04/29/2020 18:29:15
daringdiva Advanced Member 138 Posts	Posted - 04/29/2020 : 20:23:47 That's confusing to me, any other suggestions?
dbdave ECT Moderator USA 10409 Posts	Posted - 04/29/2020 : 20:53:45 Hi, daringdiva, I used Gary's tips there a long time ago and really love flexbox. He give you the examples and does a good job with explanations. Are you able to make edits to your css file? David
daringdiva Advanced Member 138 Posts	Posted - 04/29/2020 : 21:18:13 I am able to edit the css file, but I have no idea where to start. I tried to follow Gary's tip, but it is confusing to me. Is that the only way to achieve what I am looking for? Edited by - daringdiva on 04/29/2020 21:22:46
Vince Administrator 42756 Posts	Posted - 04/30/2020 : 04:10:47 Why not post a link to your products page and maybe we can see what you need to change in the stylesheet for this. Vince Click Here for Shopping Cart Software Click Here to sign up for our newsletter Click Here for the latest updater
daringdiva Advanced Member 138 Posts	Posted - 04/30/2020 : 07:10:54 On this page all of the boxes are different sizes. I want them all uniform regardless of the size of the image: https://www.niyae.com/products/President-Barack-Obama-Gifts
Marshall Ecommerce Template Guru USA 1909 Posts	Posted - 04/30/2020 : 08:11:48 Simply add this to your ectstyle.css or put it in the <head> of you products page if you are only applying it to the product displays. 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;} This would apply to the categories, products and cross sell products display. If you only want to apply it to the products, remove "div.categories," and ",div.csproducts". You can read more about flex display here https://www.w3schools.com/css/css3_flexbox.asp Marshall CENLYT Productions - ms designs Affordable Web Design Custom Ecommerce Designs Responsive Websites Cenlyt.com
1818charlie ECT Moderator United Kingdom 1194 Posts	Posted - 04/30/2020 : 08:35:09 Just a follow up to Marshalls post, if you are putting that in the page head section then you will need to surround the CSS in <style> tags. <style> 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;} <style> Steve Manchester England Remember - Any edits to the ectcart.css file will be overwritten by updater's. ALL edits to ectcart.css rules should be placed in your style.css file
Vince Administrator 42756 Posts	Posted - 04/30/2020 : 09:12:00 Could I possible add this is what I would do. Open ectstyle.css in notepad and search for div.prodimage which is around line 469, and add the min-height as here... div.prodimage { padding: 18px; text-align: center; border: 1px solid #ccc; min-height: 200px; } Now that's not going to make them ALL the same height as you have some really tall images. But it will make MOST of them the same height and looks neater. If you want to make all the same height, just increase the min-height Vince Click Here for Shopping Cart Software Click Here to sign up for our newsletter Click Here for the latest updater
ITZAP Ecommerce Template Guru Australia 1017 Posts	Posted - 04/30/2020 : 21:14:41 Greetings all, there are 2 parts to the discussion here ... (1) To make rows of div.category, div.product and div.csproduct outer containers equal in both width and height, the solution is certainly Flexbox as explained here >> But daringdiva asked ... quote: How would I make all product boxes the same size regardless of image height? (2) To make the preview image containers equal in both width and height, here is the CSS trick: div.catimage, div.prodimage, div.csprodimage { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; text-align: center; height: auto; } @media print, screen and (min-width: 40em) { div.catimage, div.prodimage, div.csprodimage { max-width: 400px; margin: 0 auto; } } div.catimage a.ectlink, div.prodimage.allprodimages a.ectlink, div.csprodimage.allprodimages a.ectlink { display: block; width: 100%; position: relative; height: 0; overflow: hidden; /* for 16:9 aspect ratio / / padding: 56.25% 0 0 0; / / for 4:3 aspect ratio / padding: 75% 0 0 0;* } img.catimage, img.prodimage.allprodimages, img.csprodimage.allprodimages { position: absolute; display: block; max-width: 100%; max-height: 100%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } Notes: > For this to work, your first step is to save a backup of your existing CSS file. Then /* comment out and disable previous CSS entries / for div.catimage, div.prodimage, div.csprodimage. Then copy/paste in my CSS. Upload, view website, CTRL+F5 to refresh the CSS. > The padding aspect ratio can be adjusted as preferred. > If desired, you could add a border to div.catimage, div.prodimage, div.csprodimage. But I wouldn't bother with any padding. > For a 4:3 photo, the target "productimage_small.jpg" size I suggest is 400px wide* x 300px high to fill the container. So when uploading, set Small Image height to 300px. Make all small images that height to make your layout neat. (That is for a full 1920px HD screen width of products. If not using full screen width, then you can calculate a smaller "productimage_small.jpg" target image size to suit.) > If your images are larger, they will be scaled down to fit. And if smaller, they will be aligned in the center of the image container, with some white space around. Gary Edited by - ITZAP on 04/30/2020 23:28:26
daringdiva Advanced Member 138 Posts	Posted - 05/03/2020 : 10:06:21 I took all suggestions and recommendations and along with Firefox Development Tools, not only was I able to get my product page how I wanted, I also tweak my categories and home page. I was able to change color, remove borders, change font...etc and I have a better understanding about css files. Thanks for all the help!
	« Topic »