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
Forum Search
Google Site Search
 All Forums
 General
 Design issues
 Products overlap and varying input textbox sizes
Author « Topic »  

larryoos
Advanced Member

USA
451 Posts

Posted - 02/02/2023 :  04:04:31  
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

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

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

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

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater
  « Topic »  
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022 ecommercetemplates.com
This page was generated in 0.03 seconds. Snitz Forums 2000