WordPress.org

Forums

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

  1. kathrogers123
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago #

    Hi kathrogers,

    Has the problem been solved?

  8. kathrogers123
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago #

    Worked perfectly! Thank you for your help :)

  13. Maria Antonietta Perna
    Member
    Posted 1 year ago #

    Great!

  14. everbluellc
    Member
    Posted 2 months ago #

    I am also trying to remove the gray borders from my product page and I am not having any luck. I am using a child theme of Virtue Premium and WooCommerce. I have tried adding

    .images img {
        border: 0;
    }

    to my Child Theme CSS without any luck. I am somewhat a novice so I am not sure how to find out where the problem lies.

    https://www.angelswimwear.net/brazilian-bikinis/

    Any help would be much appreciated.

  15. Maria Antonietta Perna
    Member
    Posted 2 months ago #

    Hi everbluellc,

    Try adding this bit of CSS to your child theme's stylesheet:

    .products div.product {
      border:none;
    }

    I hope it helps :)
    - Maria Antonietta

  16. everbluellc
    Member
    Posted 2 months ago #

    Hi Maria,

    I tried pasting the above into my CSS but still nothing. I'm not sure what the issue is. Any other suggestions?

    Thank you,

    Mike

  17. Maria Antonietta Perna
    Member
    Posted 2 months ago #

    Hi Mike,
    It works using Firebug. Try adding !important, like so:

    .products div.product {
      border:none !important;
    }

    As far as I can see, it shouldn't be necessary, but try it anyway and see if it works.

  18. everbluellc
    Member
    Posted 1 month ago #

    Sorry for the delayed response. I have applied this into my css style sheet but still nothing. Do you have any other suggestions?

    /* =Theme Customization starts here
    
    .products div.product {
      border:none !important;
    }
  19. Maria Antonietta Perna
    Member
    Posted 1 month ago #

    Hi

    Are you sure you made the change to your stylesheet? I accessed your website and I get the virtue theme's stylesheet coming up with this rule:

    .products div.product {
        border: 1px solid rgba(0, 0, 0, 0.05);
        position: relative;
    }

    Instead, if your child theme's stylesheet were being called, the new rule should be:

    .products div.product {
      border:none;
    }

    This means that the CSS that applies the border is taking precedence over your stylesheet. If you're using a child theme this shouldn't happen. Are other changes made via your stylesheet taking effect? If so, could you point me to a page on your site where this is so?

    Cheers!

Topic Closed

This topic has been closed to new replies.

About this Topic