Hello Andy,

I have a problem with version 6.8.4 in the shopping cart area.

If you create an order say for $1,000.00 the total is running off the page to the right, the total has coding for CDN$ which is correct. I can fix this by changing ectcart.css:485 (div.cartlinecheck) and change the percent to 4% just to fit the numbers into the container.

I think the change should be in the style.css to avoid update overrides, however I need help on this one. This problem exists on both our Canadian and USA site.

On another note, I also had to adjust the Qty. box to fit 1000 pieces, no problem there, just changed style.css line 271 to 40px. I think that was correct.

Regards, Peter



CCI - Tools for the Discriminating Chef

Hi Peter, thanks for letting us know we'll run a couple of test and get back to you on this, please subscribe to this post if you have not done so already.

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

Thanks Sinbad

CCI - Tools for the Discriminating Chef

Hi Peter

I had a look at your site and can see what it's happening for you - and there are a couple of solutions. You can make that css change but add it to style.css so it doesn't get overwritten when ectcart.css is uploaded. What I would consider though is losing the right hand sidebar on your cart (and possibly thanks) pages.

All you need to do is add this line to the editable head section on those pages

<link href="css/2col.css" rel="stylesheet" type="text/css" />

Andy

Please feel free to review / rate our software

Hi Andy,

Tried the <link href="css/2col.css" rel="stylesheet" type="text/css" /> in the cart.asp page and total still overruns on the right. I also noted that the issue remains for the other windows sizing (viewport), tablet, etc..
(2col.css is still active on the Canadian site)

Concerning the right sidebar, I would prefer not to get rid of the right sidebar as we have some other marketing ideas that we are working on for the future.

A work around perhaps - Is there a way to turn off the "CDN" for the item lines and only have the "CDN" show for subtotals, shipping and Grand Total? However the coding may still push numbers off to the right if the amount is high.

Regards, Peter



CCI - Tools for the Discriminating Chef

In 2col.css use

.middle_contain{ width:80% !important; float:left;}

instead of

.middle_contain{ width:76%; float:left;}

It's only needed on cart.asp. I can't see how you can turn off the CDN$ display on just the cart screen I'm afraid.

Andy

Please feel free to review / rate our software

Done but still overflows if item total is over $1,000.00 in value.

CCI - Tools for the Discriminating Chef

That looks better, try adding this to style.css

div.cartlinequant, div.cartdetailsquant{width:4%;}
div.cartdetailstotal, div.cartlinetotal{width:12%;}

Andy

Please feel free to review / rate our software

OK Andy, that did work for the main page but if you resize for tablets, phones, etc. there are other problems. i.e. delete bucket, and text overruns.

CCI - Tools for the Discriminating Chef

Hi I've been looking at this and noticed that style.css is listed twice on the page, also ectcart.css should come after style.css

<link rel="stylesheet" type="text/css" href="/css/ectcart.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

should be

<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/ectcart.css" />


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

Hi Sinbad,

Appears to be a left over from standard web pages to responsive design.

OK fix done on main project template (Dreamweaver) so all attached files have been updated.

On the cart.asp page I moved Andy's comment instructions <link href="css/2col.css" rel="stylesheet" type="text/css" /> to the area
<!-- #BeginEditable "head" -->
<link href="css/2col.css" rel="stylesheet" type="text/css" />

The main project files have:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/ectcart.css" />

therefore this also shows up on the un-editable area in the cart.asp file. Would this also not be a conflict.

Noticed nothing changed after making the changes.

CCI - Tools for the Discriminating Chef

Hi I'm seeing the .middle_contain for width 640px being disabled in the css due to the important statement higher in the file causing the width of the cart to be only 80% of the screen

Can you add the important statement to this line in 2col.css and that will widen the cart and then adjustments can be made.

@media all and (max-width:640px) {
.middle_contain{ width:98% !important;}
}



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

Made the change and issues are still apparent.

CCI - Tools for the Discriminating Chef

Hi yes but now we have room to adjust the css, in ectcart.css try making the following changes under the section @media all and (max-width: 940px)


div.cartdetailsname {
width: 35%; >>>> 25%
}

div.cartlinename {
width: 35%; >>>>25%
}

div.cartdetailsquant {
width: 16%; >>>>12%
}

div.cartlinequant {
width: 16%; >>>>12%
}

div.cartdetailstotal {
width: 21%; >>> 25%
}
div.cartlineprice {
width: 21%; 25%
}

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

Made the changes but still not working ??

CCI - Tools for the Discriminating Chef

Those changes should actually be copied to style.css and not edited in ectcart.css and you want to just change the percentages not add the arrows

eg

div.cartdetailsname {
width: 25%;
}

Andy

Please feel free to review / rate our software

Hi Sinbad and Andy,

OK, I have worked on this issue and have come up with the following.

First I have to agree with Andy not to make changes in ectcart.css as this will be overwritten when updates come thru. All changes were made in 2col.css and style.css.

I also left the settings on line 12 & 13 in this order, ectcart.css first then following with style.css assuming programs read top to bottom. ?
<link rel="stylesheet" type="text/css" href="/css/ectcart.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />


The additional changes I did was to add div.cart**** information to the style.css file in the areas prior to "@media all and (max-width: ???" and "@media all and (max-width: 800px and 768px" based on the % that needed to be displayed. e.g.
div.cartline {
width: 100%;
}

div.cartlineid {
display:none;
}

div.cartlinename {
width: 45%;
}

div.cartlineprice {
width: 17%;
}

div.cartlinequant {
width: 12%;
}

div.cartdelete {
width: 5%;
}

div.cartlinecheck{
font-size:0.8em;
width:5%;
display:inline-block;
white-space:normal;
text-align:center;
vertical-align:middle;
}

div.cartlinetotal {
width: 17%;
}

======================
see style.css lines:
860 - 896
937 - 973
982 - 1018

I am not sure if this is the correct way to handle it, but it seems to work.

Any comments appreciated. Thanks

Peter


CCI - Tools for the Discriminating Chef

Hi Peter

That all looks correct to me.

Andy

Please feel free to review / rate our software

Thanks Andy

Other than a few adjustments still needed, its nice to know I am on the right track and beginning to know all this better.

I really appreciated the input.

Best Regards, Peter

CCI - Tools for the Discriminating Chef