Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
.product-gallery-slider .slide img {
width: auto !important;
}
Perfect!! I wasn’t getting the ID selector correct. Now that that is fixed, how would I remove that Zoom button icon? I tried:
.zoom-button {display:none;)
but that isn’t doing it. Thanks for any help-
Kristi
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Kristi are you familiar with Firebug or another browser developer tool? You can identify within a few seconds the correct selectors to use.
Edit: And specificity
Curly brace, not normal bracket.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
@quin, It still won’t hide the zoom button because the wrong level of specificity is used (the syntax error only fails code that proceeds it anyway).
True that, and chances are that was just a typo anyway, but it may not be and it may be in other areas of the CSS.
All I know is if I wanted .zoom-button to go, and there was no other styling after, .zoom-button { display:none; } ought to work, at least it would work in my Themes.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
But if you use Firebug or another developer tool you can plainly see this:
.hide-for-small {
display: inherit !important;
}
Ahh, the !important, how sneaky.
((I don’t have firebug; I’m on my iPad))
You know I do try to use Firebug, but I might not be using is correctly. I rollover the code in the HTML box and it highlights the things on my page. But for instance, I did that for the zoom icon and it displays this:
style=”overflow-x: visible;”
So I don’t get it. I tried the above style but it is still showing a little icon – can you take another look? thanks so much! (and after i sent it to you I realized I had the smooth bracket instead of curly – but my css didn’t work anyway :-/ )
http://5ea.c5f.myftpupload.com/product/panini-grilled-sandwiches/grilled-reuben/
thanks!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I tried the above style
The above style was me identifying to you what is causing the icon to appear, you have to override it if you want to change it. You know, display it block instead of inherit, and use the important rule.
Thanks Andrew – block didn’t work, but display: none did work. Thanks for the screen shot too – was that Firebug? My firebug looks a little different, but I think I just have to learn css a little better 🙂
thanks!
