I am working on a website when suddenly the product image on the single page stops displaying. But when I click on the empty space where the image supposed to be it pops up with the image. I can't seem to figure out why the sudden loss of image.
http://www.efikobooks.com/product/the-huge-kids-quiz-book/
in your page under the "single-pimage" div there is an another div with class name "woocommerce-product-gallery" which has an inline css "opacity:0" that's why your product image is not displaying set it to 1 and image will appear.. or just paste this in your css...
.single-pimage .woocommerce-product-gallery{
opacity: 1 !important;
}
Related
I have a WooCommerce shop and on the shop page when I rollover an image it swaps it for the first image in the gallery by default which is fine. The problem i have is my images are transparent png's and so as the second image appears you can still see the first image beneath it.
Is it possible to hide the first image with dsiplay:none; if so how do i find the correct css class, as i have spent days looking but can not find it.
Any suggestions would be appreciated.
In the end, I just added a background to the second image so that it hid the first
.secondary-image {
background:red!important;
}
I have an html page where we have images,text and two buttons
1.print page for printing the page
2.Hide/Show(toggle button) for hide/show below the image.
image in the page are generated dynamically using remote service.
In Google-Chrome
When I click Hide/Show button to hide image and click print button,print preview page comes on the same page.
Then I cancel print page and back to page.
Then I again click Hide/Show button to show image
here the problem is that image is not shown on the page.
Using firebuglite I found that inline css style like width and height for image are 0 and hence image is not shown on the page.
How can I manage the css style for image after print preview and this problem occurs only in Chrome.
Please help.
here is CSS Browser Selector using javascript:
http://rafael.adm.br/css_browser_selector/
you can use that,then add the class:
.chrome #btn{
height:30px !important;
width:100px !important;
}
I have been trying to set up a simple lightbox for my trip reports on my website. I finally got Lightbox JS to work on my site (I had issues getting Lightbox 2 to load up) but I also use AllWebMenus and when you select the first lightboxed image the menus shows up on top of the photo. Any idea how I can set it up that the menu does not show up on top of the image?
Here is a link to my test page.
Thanks
Just add z-index: 9999 to the div #lightbox
I am using jquery tabbed content and I have noticed when navigating to any tab other than the product tab the page shifts a few pixels to the right and then when clicking the product tab it shifts back. What in the world is causing this?
The link to see it in action, http://clients.zerozendesign.info/techject/
The reason is the presence of the scroll bar on the long page content on the products tab. You should consider displaying the scroll bar even when the content does not require it using the CSS property for overflow, like so:
html { overflow-y:scroll; }
has anyone ever used nivo slider for images? I'm having an issue with showing the next and prev images for the navigation. It shows the prev image for boh next and prev navigation.
can anyone help please?
If you simply copy/pasted the example code, you will notice that it is asking for one image. This is because it's using an image called a sprite. A sprite is an image that has multiple images on it, which then are positioned via CSS via background-position attribute. You can either create your own sprite image and position it with CSS or you can use two different images.
If you'd like to use two images, simply change the left control's image in the CSS to left.png (assuming you have a left arrow icon) and the right control's image in the CSS to right.png.