My Courses > CustomizeWoo > Module 3 > Lesson 02: Google Chrome “Inspect”
Google Chrome “Inspect”
Google Chrome (and other browsers too) is your CSS friend. “Inspect” allows you to see every element’s CSS, so that you can customize it live and port it to your style.css
Video
Please note: English captions are enabled by default (click on “CC” in the video player to disable). Also, you can click on the “gear” icon to manage quality and playback speed. Enjoy!
Sorry, this video is only visible to logged in Business Bloomer Club members with a PRO PASS.
If you joined already, please log in.
Otherwise, here is why you should join the Club.
If you joined already, please log in.
Otherwise, here is why you should join the Club.
2 thoughts on “Google Chrome “Inspect””
Questions? Feedback? Support? Leave your comment now!
_____
_____
If you are writing code, please wrap it between: [php]code_here[/php]
Hello. I tried to make my product image sticky as on this page: https://www.kustomdesigns.com.au/?product=mx-jersey.
I used this CSS code:
.woocommerce div.product div.images.woocommerce-product-gallery { position: sticky; top: 0; }.
The problem is it works until the full product description starts overlapping the image. But I suppose it is possible that anything that’s full width below the product image could be pushed-up. Could you help me with a hint how to achieve this? Thank you!
Hi Marcel! I think you cannot achieve that with pure CSS, you need JavaScript instead/as well. If something is sticky it stays sticky in CSS, so this is not your best bet. Hope this helps!