Community Forums 

Main Content

Can anyone center the cart product images?

    Nov 03 2017 22:21:20

    #1

    Brian R. Smith

    Join date : 2008-09-18      Posts : 10

    The product images in the cart are 90px wide by default and in a "TD" tag. Is there way to center the image left to right in the TD tag? I've tried everything I can think of using custom CSS.

    I've tried setting the margins to auto, adding padding, text-align=center, etc. Nothing seems to work!

    Any cart gurus know how to center images? They are smashed against the left side of the cart and look weird.



    Nov 04 2017 10:08:24

    #2

    Don

    Join date : 2008-09-18      Posts : 486

    Good point - Let us all know if you find out how to do it.

    DB.

    www.donbarrow.co.uk
    www.pacenotes.com
    Please either Share or Like my Facebook




    Nov 04 2017 16:50:53

    #3

    GT

    Join date : 2008-09-18      Posts : 3202

    Are you using your own template?

    If you are, give us the URL of your website and we'll take a look at the page and css.

    Having trouble with a form or need one building?
    Fast turnaround, but I do charge :)

    Mal's Forms / Scripts and the syntax are here.




    Nov 04 2017 20:16:14

    #4

    Brian R. Smith

    Join date : 2008-09-18      Posts : 10

    GT said Are you using your own template?

    If you are, give us the URL of your website and we'll take a look at the page and css.


    The problem is on the default cart. Check out the following link:

    http://omega-direct.webflow.io/new

    Click the add to the cart button and you will notice the product image is flush against the left side of the table. As you can see it looks pretty bad.

    Anyone know how to center this image using CSS? I tried for an hour and gave up.



    Nov 04 2017 20:17:20

    #5

    Brian R. Smith

    Join date : 2008-09-18      Posts : 10

    GT said Are you using your own template?

    If you are, give us the URL of your website and we'll take a look at the page and css.


    GT my money is on you! Can you find a way to center the product images in the TD tag?



    Nov 05 2017 07:22:54

    #6

    GT

    Join date : 2008-09-18      Posts : 3202

    I'm not seeing what you're seeing, what browser do you use?

    http://www.malsforms.com/omega.jpg

    Having trouble with a form or need one building?
    Fast turnaround, but I do charge :)

    Mal's Forms / Scripts and the syntax are here.




    Nov 05 2017 14:03:30

    #7

    Geoff

    Join date : 2008-09-18      Posts : 415

    Brian R. Smith said The product images in the cart are 90px wide by default and in a "TD" tag. Is there way to center the image left to right in the TD tag? I've tried everything I can think of using custom CSS.

    I've tried setting the margins to auto, adding padding, text-align=center, etc. Nothing seems to work!

    Any cart gurus know how to center images? They are smashed against the left side of the cart and look weird.


    To centre the image, modify the class .thumbnail by adding:

    display: block;
    margin-left: auto;
    margin-right: auto;



    Nov 09 2017 19:11:28

    #8

    Don

    Join date : 2008-09-18      Posts : 486

    Brian R. Smith said GT said Are you using your own template?

    If you are, give us the URL of your website and we'll take a look at the page and css.


    The problem is on the default cart. Check out the following link:

    http://omega-direct.webflow.io/new

    Click the add to the cart button and you will notice the product image is flush against the left side of the table. As you can see it looks pretty bad.

    Anyone know how to center this image using CSS? I tried for an hour and gave up.


    Have you managed to solve the centreing problem ?

    I cannot understand Geoff's solution.

    DB.

    www.donbarrow.co.uk
    www.pacenotes.com
    Please either Share or Like my Facebook




    Nov 10 2017 12:25:31

    #9

    GT

    Join date : 2008-09-18      Posts : 3202

    there is a gap / padding to the left of the image in my browser, see the screenshot...

    http://www.malsforms.com/omega-2.jpg

    Having trouble with a form or need one building?
    Fast turnaround, but I do charge :)

    Mal's Forms / Scripts and the syntax are here.




    Nov 13 2017 18:56:37

    #10

    Geoff

    Join date : 2008-09-18      Posts : 415

    Don said [...] I cannot understand Geoff's solution.

    V2 cart users can upload a custom style sheet. See Cart Setup >> Customise >> Upload a Style Sheet. There is a link on that page to view the cart's main style sheet so the relevant class or id selector can be identified. Simply create a local .css file with the modified class or id attributes that you wish to apply and upload it.

    My previous reply assumed that this procedure was known.