Jump to content

Wrapped product description on standard cart


Recommended Posts

I have noticed an oddity but unsure if it is caused by me or a bug - or just poor design.

I have products with an image in the first line of the description using the format <img src="/images/picture.png" class="img-responsive" width="100%" alt="This is a picture">

This results in the picture with the Order button on the right, however the description text is wrapped to the width of the image rather than the whole "box"

See https://www.truffiere.co.uk/en_GB/store/teams-phones

Removing the image doesnt change the behaviour so I'm inclined to think that this is just poor design 

What would be the best way to fix this so that the description text uses the full width of the "box"?

Edited by MrGettingRatherFrustrated
Link to comment
Share on other sites

47 minutes ago, MrGettingRatherFrustrated said:

have noticed an oddity but unsure if it is caused by me or a bug - or just poor design.

no - no - yes.

not a bug as WHMCS intended it to look like that back in 2015 when SC was first released.

49 minutes ago, MrGettingRatherFrustrated said:

Removing the image doesn't change the behaviour so I'm inclined to think that this is just poor design 

the description (text and/or image) is contained within a 60% width div - so it's not the image that is the problem, but the design.

51 minutes ago, MrGettingRatherFrustrated said:

What would be the best way to fix this so that the description text uses the full width of the "box"?

best? beauty is in the eye of the beholder on this, so it depends what you want the end result to be...

you could remove the 60% width from the description div....

#order-standard_cart .products .product div.product-desc {
	width: unset !important;
}

and you'd end up with....

Xh16Ym9.png

... and then you have to decide what to do about the footer (price & button) - leave it as is; move it to the top (before description); integrate the image into the footer instead etc etc..

at that point, you're modifying products.tpl and would probably need to consider making a child theme.

Link to comment
Share on other sites

2 hours ago, MrGettingRatherFrustrated said:

And that is where I think I'm out of my depth on this

no you could do it - the problem you're going to have is with the images in the descriptions - they're going to have to be removed from each description... otherwise it would be a lot of faffing about (for the benefit of others, that's a technical British expression!) code-wise.

i'm assuming you want it to look something like this...

qP5b4IM.png

leave it with me and i'll take a look again in the morning - the rough template was done in a few mins, but i'll need a fresh look tomorrow to tweak the CSS and test the image checks.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated