Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 29, 2017 at 5:10 pm #801151
    Itai

    Hello,

    I have a query regarding the CSS of a single product page:
    example page

    i would like to get rid of the border and black padding of the main image. Essentially for it to look like it does in a :hover state.

    View post on imgur.com


    I can’t seem to find what the CSS class is?

    Also, bonus question, I would like to wrap the whole gallery (main image + thumbs) in a grey border (not the the individual elements) what would the CSS class be for that?

    Cheers,

    Itai

    May 29, 2017 at 5:22 pm #801157
    Nikko

    Hey Itai,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    .single-product-main-image .images > a {
    border: 0 !important;
    padding: 0 !important;
}

    Let us know if this helps :)

    Best regards,
    Nikko

    May 29, 2017 at 5:32 pm #801162
    Itai

    Hi Nikko,

    No it doesn’t. :-(
    It also creates a little artifact below the lightbox button:

    View post on imgur.com

    May 29, 2017 at 11:57 pm #801301
    Itai

    So now I got it to look like I want:

    .single-product-main-image .images a, div.images img {border: 0px!important; padding: 0px!important;}

div.flex-viewport {margin-bottom: 2px!important;}

.single-product .av_header_transparency + #main > .container_wrap_first {
    padding-top: 140px;
}

    But that artifact is still there. Any idea what it is? It seems to be caused by the first CSS statement. If I put a padding-top of 4px or higher, it’s masked ?! It’s driving me crazy…

    • This reply was modified 7 years, 5 months ago by Itai.
    May 30, 2017 at 12:44 am #801314
    John Torvik

    Hi,

    Just add the follow custom CSS code:

      .emoji {
    display: none !important;
  }

    Best regards,
    John Torvik

    May 30, 2017 at 12:53 am #801318
    Itai

    Doesn’t work. No difference.
    ( What would an emoji be doing there anyway?)

    May 30, 2017 at 5:47 am #801361
    Sarah

    Hi!

    If you view the page’s code, the image that you don’t want to see has the class “emoji”. This is why John’s code is like that.

    Please try this code instead:

    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {display:none;}

    This will remove the yellow square, but leave the magnifying glass. If you want to remove the magnifying glass as well, please use this instead:

    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {display:none;}

    Best regards,
    Sarah

    May 30, 2017 at 4:12 pm #801558
    Itai

    Hi Sarah,

    Thanks those work but what I want is to keep the yellow square and remove the emoji.
    .emoji {display: none !important;} does not remove the emoji unfortunately.

    What should I use?

    Itai

    May 30, 2017 at 4:24 pm #801564
    Sarah

    Please try this instead:

    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger .emoji {display:none !important;}

    Best regards,
    Sarah

    May 30, 2017 at 4:35 pm #801572
    Itai

    Well the yellow square is back…but so is the emoji ;-(
    I’ve updated my online enfold child css, you can see for yourself.

    Cheers,

    i

    May 30, 2017 at 9:28 pm #801670
    Itai

    Ok,
    This is what I came up with, in case anyone is also struggling with this. Not perfect but it works
    I decided to show the magnifying glass on a hover:

    
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger  {height: 1.5em;!important;}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover  {height: 6em;!important;}
    May 30, 2017 at 10:10 pm #801680
    Nikko

    Hi,

    Glad that you figured it out and thanks for sharing the solution that works for you, it would help a lot :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.