WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Remove image border around product (12 posts)

  1. kathrogers123
    Member
    Posted 4 months ago #

    Hello there,

    I am trying to remove the grey border around the product images on my website but failing miserably. I am using the Mystile theme with the WooCommerce plugin and I'm editing the child theme.

    The link to my site is: http://oneofakindpembs.com/

    Any help would be very much appreciated.

    Thanks

  2. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    Hi kathrogers,

    have you tried putting this style rule in your child theme's CSS file:

    ul.products li.product img {
        border: 0;
    }
  3. kathrogers123
    Member
    Posted 4 months ago #

    Hello!

    Thank you for looking into it.

    I've tried that and it's not worked. Also tried none instead of 0.

    Any other help would be much appreciated :)

  4. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    I tried the code above on the homeware page using firebug and it eliminated the border.
    Have you tried using !important? It needs to overwrite what's in grey.css and if the above is not working, perhaps adding !important at the end could force the application of the new rule (although it seems a bit odd that it's not doing so without this little hack).

  5. kathrogers123
    Member
    Posted 4 months ago #

    That's really strange that it worked for you using firebug! I've already tried using !important and it still isn't working.

    Very strange!

  6. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    These are 2 screenshots of the image in question.

    With border: http://antonietta-designs.net63.net/imagewithborder.jpg

    Without border: http://antonietta-designs.net63.net/imagenoborder.jpg

  7. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    Hi kathrogers,

    Has the problem been solved?

  8. kathrogers123
    Member
    Posted 4 months ago #

    Hello Antonietta,

    The problem has been solved on the homeware page now - thank you so much!

    It's still showing the grey border on the product page though, any suggestions?

    http://oneofakindpembs.com/shop/homeware/driftwood-photo-frame-5-x-7/

    Thank you for your help - I'm still getting used to WordPress

  9. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    It's still showing because the selector is different. Here's the code as it is now:

    .images img {
        -moz-box-sizing: border-box;
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #E6E6E6;
        padding: 0.618em;
        width: 100%;
    }

    In style.css in your child theme override the above by adding:

    .images img {
        border: 0;
    }

    I hope this helps (it worked with firebug).

  10. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    It's still showing because the selector is different. Here's the code as it is now:

    .images img {
        -moz-box-sizing: border-box;
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #E6E6E6;
        padding: 0.618em;
        width: 100%;
    }

    In style.css in your child theme override the above by adding:

    .images img {
        border: 0;
    }

    I hope this helps (it worked with firebug).

  11. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    Sorry that the message is showing more than once: it's just that after posting the first and second time nothing was showing. Only later I could see all attempts at posting displayed on the page.

  12. kathrogers123
    Member
    Posted 4 months ago #

    Worked perfectly! Thank you for your help :)

  13. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    Great!

Reply

You must log in to post.

About this Topic