larryoos
Advanced Member
USA
451 Posts |
Posted - 02/02/2023 : 04:04:31
|
larryoos
Advanced Member
USA
451 Posts |
Posted - 02/02/2023 : 11:02:43
Anyone able to help?
Larry
|
dbdave
ECT Moderator
USA
10426 Posts |
Posted - 02/02/2023 : 11:28:01
Hi Larry, the 1st (quantity) box is smaller because you have the following in style.css line 768
#w0quant { height: 21px; width: 50px; border: 1px solid #ccc; }
I haven't been able to dig in further yet on the other issue, but if no one else responds, I'll take another look this evening.
David
|
dbdave
ECT Moderator
USA
10426 Posts |
Posted - 02/02/2023 : 11:31:35
Ok, I see it You are forcing the height of the product div in style.css line 395
div.product { padding: 6px; width: 24%; float: left; height: 285px; margin: 2px; }
You should consider flexbox for this page. https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=107608
Thanks, David
|
larryoos
Advanced Member
USA
451 Posts |
Posted - 02/02/2023 : 12:08:49
Hi Dave,
So I added the suggested flexbox css, removed the fixed height, and 1st quantity box style.
Now the products all over the place.
https://www.rushlegal.com/products.asp?cat=33
https://www.rushlegal.com/products.asp
Larry
|
dbdave
ECT Moderator
USA
10426 Posts |
Posted - 02/02/2023 : 13:13:26
Hi Larry, looks pretty good to me other than maybe some margin at the top of the add to cart button. Try a different browser, or clear your cache. Thanks, David
|
larryoos
Advanced Member
USA
451 Posts |
Posted - 02/02/2023 : 13:29:51
I had to put it back the way it was and force a couple more sizes to get it to where is. I think a big part of the problem is really long product names they insist on having.
Larry
|
dbdave
ECT Moderator
USA
10426 Posts |
Posted - 02/02/2023 : 13:43:39
Hi Larry, that's the magic of flexbox. It will set each row to the height of the tallest div. Just create a clone of the product page and call it products2.asp and place the css in the page and test that until you get it looking the way you want, then apply the changes to the live site.
Thanks, David
|
larryoos
Advanced Member
USA
451 Posts |
Posted - 02/02/2023 : 14:26:46
Thanks Dave, I'll try that. Meanwhile, there seems to be an extra <br> between the prodname div and the addtocart div. and I can't figure out where it's coming from. It's not in products.asp and I don't see that incproductbody.asp is adding it either, Any ideas? Larry
|
dbdave
ECT Moderator
USA
10426 Posts |
Posted - 02/02/2023 : 15:10:42
Hi Larry, it's probably hard coded, but really shouldn't be a problem. If you don't like it, you can get rid of it with css
div.prodname br { display:none; }
should do the trick.
David
Edited by - dbdave on 02/02/2023 15:13:42
|
ITZAP
Ecommerce Template Guru
Australia
1018 Posts |
Posted - 02/02/2023 : 16:20:31
I think the solution you are looking for was added in the September 2022 ASP v7.5.3 release: https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=114960Just add this ASP parameter to includes.aspectproductstyle=4Then you will get the Flexbox Grid layout on the category and products pages. This uses the stylesheet located in the "css" folder named ectstyleproduct4.cssAny overrides that you want should added to your main styles.css (or whatever name) stylesheet. Gary
Edited by - ITZAP on 02/02/2023 16:23:53
|
larryoos
Advanced Member
USA
451 Posts |
Posted - 02/02/2023 : 17:46:34
Okay, updated to asp v 7.5.5, removed forced heights, added ectproductstyle=4 to includes.asp This is where I'm at now. The upper right product image is one pixel shorter than the previous product image preventing the next product from going to the left. Do I need to force all product images to one size? Flexbox won't deal with this? https://www.rushlegal.com/products.asp?cat=33 Larry
|
dbdave
ECT Moderator
USA
10426 Posts |
Posted - 02/02/2023 : 17:59:09
Hi Larry, Gary is really good with this, so he may have a better solution, but I tested your page by setting a min-height for the images and all dropped into place.
In your style.css line 424, I added the following
div.prodimage { text-align: center; min-height: 200px; }
Adjust that height to the maximum you think any of your images will be.
David
|
midvalleydrifter001
Ecommerce Template Expert
USA
934 Posts |
Posted - 02/02/2023 : 19:18:07
quote: In your style.css line 424, I added the following
Actually you want that in your style.css on line 442
|
ITZAP
Ecommerce Template Guru
Australia
1018 Posts |
Posted - 02/02/2023 : 19:22:44
Hi Larry, viewing https://www.rushlegal.com/products.asp?cat=33 then Right-Click ... Inspect I can see that adding ectproductstyle=4 to includes.asp has not worked the Flexbox Grid stylesheet has not loaded at all. Still just loading ectcart.css and style.css same as before. From here this is what I recommend you do: (1) Make a backup copy of style.css(2) Open style.css and strip out (delete) all existing entries for: div.categories div.category div.products div.product div.csproducts div.csproduct div.catimage div.prodimage img.catimage, img.prodimage.allprodimages, img.csprodimage.allprodimages div.catname, div.prodname, div.csprodname div.catdesc, div.proddescription, div.csproddescription div.csprodprice div.prodprice div.listprice div.cslistprice div.proddiscounts div.csproddiscounts div.wasprice div.saveprice because you will find CSS for all of those in ectstyleproduct4.css(3) Have a Moderator here with access to your server ( Dave or Vince) check your website to troubleshoot why the ectproductstyle=4 entry added in includes.asp has not worked. That should have caused the stylesheet named ectstyleproduct4.css to be loaded. (4) Once that issue is sorted, then you can proceed to add any desired overrides to ectstyleproduct4.css in style.cssmin-height CSS is not the solution for this. Gary
Edited by - ITZAP on 02/02/2023 19:58:59
|
Vince
Administrator
42785 Posts |
Posted - 02/03/2023 : 06:01:27
Hi all quote: check your website to troubleshoot why the ectproductstyle=4 entry added in includes.asp has not worked.
This only works if you are using the incectstyle.php include file to automatically set the style sheets. This isn't really necessary. quote: The upper right product image is one pixel shorter than the previous product image preventing the next product from going to the left.
The ectcart.css file will set the product "display" to inline-block. But you still have an entry in your own style sheet to float:left and this isn't necessary and is causing this problem. It's around line 395 ... div.product { padding: 6px; width: 24%; float: left; margin: 2px; } You can really just remove that whole div.product entry as everything there is replaced by entries in the ectcart.css file as you have ectcart.css after the sites own style sheet. We'll help you with these changes of course but we do have a service where we spend an hour going over your site and fixing these CSS layout issues. If this is of interest it is here... https://www.ecommercetemplates.com/Set-Up-Site-StandardVince Click Here for Shopping Cart SoftwareClick Here to sign up for our newsletterClick Here for the latest updater
|
|
|