Longer short descriptions cause products to overlap vertically and quantity boxes are different sizes on products.asp

How can I fix this?



https://www.rushlegal.com/products.asp?cat=33





Larry

Anyone able to help?

Larry

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

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

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

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

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

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

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

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

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=114960

Just add this ASP parameter to includes.asp

ectproductstyle=4

Then you will get the Flexbox Grid layout on the category and products pages. This uses the stylesheet located in the "css" folder named ectstyleproduct4.css

Any overrides that you want should added to your main styles.css (or whatever name) stylesheet.

Gary

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

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

quote:

---

In your style.css line 424, I added the following

---

Actually you want that in your style.css on line 442

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.css

min-height CSS is not the solution for this.

Gary

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-Standard

Vince

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