Nik Grey Posted January 16, 2014 Share Posted January 16, 2014 I need to sort this out as it looks awful - it ONLY happens with my 'Lettering' Products: Here is the full screenshot. How can I stop the item image thumbnail (as that's what it is) appearing over the price/quantity? Hopefully its just some small code changes in a file, but what and in which file ? Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 16, 2014 Share Posted January 16, 2014 Please view the HTML source of this page and locate the <img> tag for that product's image. Let us know what the filename is. For the Mican skin, that image's reference is "gallery" and the longest side is supposed to be 50 pixels (as specified in the skin's config.xml file). I think the problem is that CubeCart has not had a chance to build the various sized images from the product's source image. The Mican CSS has for that image: .basket_product .image { float: left; height: 60px; margin-right: 5px; width: 50px; } Because it is floating, a solid object in that space will overflow anything around it. I would think that for this image in particular, showing a 50px wide version would be barely viewable. But then, such is the second item in the list. The wrong solution is to find where in the Lettering tool code would be the best place to call the CubeCart class::method() to render all the skin's various image sizes and cache them. The reason I say that is because these lettering product's are supposedly unique to the order in which they are being purchased. Once the order is complete, there is no reason why this "product" should exist anymore. (But a reference to the CC_inventory table will still exist in the CC_order_inventory table. Just so you know.) We can try to have the browser resize the image using CSS. After the rule near line 740 in common.css, add: .basket_product .image img { height: auto; width: 100%; } This should size the image so that it takes 100% -- and no more -- of the span class 'image'. Quote Link to comment Share on other sites More sharing options...
Nik Grey Posted January 17, 2014 Author Share Posted January 17, 2014 Sorry for the delay, as you know Thursdays is my Hospital Radio Day. The product image is: http://greyprint.co.uk/images/cache/xN7AtQBj.138.png Will go through the above now. ok, I added the code and it looks like this: .basket_product .image { float: left; height: 60px; margin-right: 5px; width: 50px; .basket_product .image img { height: auto; width: 100%; } But its had no effect - I did clear my cache. Quote Link to comment Share on other sites More sharing options...
Nik Grey Posted January 22, 2014 Author Share Posted January 22, 2014 Any other ideas for this ? I 'Think' this is the only bug I have left to resolve before I can consider opening. Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 22, 2014 Share Posted January 22, 2014 I wonder what happened to my reply to this? I had said that if the above code is accurately copied from your file, then it has a syntax error. It must look like this: .basket_product .image { float: left; height: 60px; margin-right: 5px; width: 50px; }.basket_product .image img {height: auto;width: 100%;} The red closing paren is missing from your code. Quote Link to comment Share on other sites More sharing options...
Nik Grey Posted January 22, 2014 Author Share Posted January 22, 2014 Fantastic, that's fine: Thank you Brian Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.