fercoresc
-
Posts
21 -
Joined
-
Last visited
fercoresc's Achievements
-
CSS for stacked product images on mobile
fercoresc replied to fercoresc's topic in Customize with code
I was able to fix it with this updated code: @media screen and (max-width:767px) { .ProductItem-gallery-slides-item { position: static !important; height: auto !important; visibility: visible !important; display: block !important; animation: unset !important; } .ProductItem-gallery-slides:before { padding: 0 !important; } .ProductItem-gallery-carousel-controls { display:none!important; } .ProductItem-gallery-current-slide-indicator { display: none; } section.ProductItem-gallery { pointer-events: none; user-select: none !important; } } -
Hello! I am trying to create an overlay with an image inside of a gallery Lightbox, so that when the user hovers over the image, this overlay appears. I managed to do it in this gallery: https://www.fernandacortina.com/limited-editions for the grid itself, but on another page I want this same effect inside of the Lightbox only. I already have another hover effect for the grid in place. The page I need help with is: https://www.fernandacortina.com/gallery I've tried a couple of snippets of CSS but none of them have worked except to place an image on top of the Lightbox, but can't figure out how to get the hover effect and how to get that image overlay to repeat so it covers the whole image.
-
Hello! I used some CSS to make the product images on my website show as stacked on mobile. The code worked in principle, but for some reason the second image is not showing and there is instead a blank space between the image and the product title. Is there a way to fix this so the second image shows stacked or to hide it altogether so it's only the main product image? The link to the product page is: https://www.fernandacortina.com/fine-art/p/whitetip-rock-2023. The code I used is a mix of solutions I found on these forums: @media screen and (max-width:640px) { .ProductItem-gallery-slides-item { position: static !important; height: auto !important; visibility: visible !important; } img.ProductItem-gallery-slides-item-image { width: 100% !important; height: auto !important; top: 0 !important; left: 0 !important; } .ProductItem-gallery-slides:before { padding-bottom: 0% !important; } .ProductItem-gallery-current-slide-indicator.enable-on-first-image-load.enabled { display: none; } .ProductItem-gallery-carousel-controls { display: none !important; } .ProductItem-gallery-current-slide-indicator { display: none; } } And here is a screenshot of the issue I'm having:
-
Hi @tuanphan, I would like to add this to by website, as well as a caption under the Lightbox. My website is www.fernandacortina.com/gallery
-
Remove close button border on gallery Lightbox
fercoresc replied to fercoresc's topic in Customize with code
That worked! Thank you! -
Horizontal Scroll On Image Gallery Slideshow
fercoresc replied to Izabellabuzogany's topic in Pages & Content
Also interested in the code! Also interested in the code! -
Remove close button border on gallery Lightbox
fercoresc replied to fercoresc's topic in Customize with code
With the arrows sometimes it doesn't show up, but if I use keyboard to move between images it appears. -
Beyondspace reacted to a post in a topic:
Remove close button border on gallery Lightbox
-
Hello! I recently did some customisation to my Lightbox for a strips gallery page on my website. The result is exactly what I wanted except I have not been able to remove the container border for the close button, as shown in the screenshot below. It only appears after using the previous / next navigation on the lightbox. Is there any way to remove it? Page URL is www.fernandacortina.com/gallery. This is the code I used for the changes I made: /*** Lightbox customisation ***/ .gallery-lightbox-close-btn-icon { top: 20px; bottom: auto; right: 10px; left: auto; } /* change the background color - gallery*/ .gallery-lightbox-background{ background: #ffffff; opacity:0.98; } /* change the close button color - gallery */ .gallery-lightbox-close-btn-icon { color: #9D9D9D!important } /* change the prev/next controls - gallery */ .gallery-lightbox-control-btn-icon *{ color: #9D9D9D; } /* add close text before button */ .gallery-lightbox-close-btn-icon:before { font-family: 'nourd-light'; font-weight: 500; font-size: 13px; letter-spacing: 1px; color: #7D7C7C!important; content: "CLOSE"; position: absolute; /* Change from relative to absolute */ top: 2px; /* Adjust this value as needed */ left: -48px; /* Adjust this value as needed */ }
-
Site URL: https://fernandacortina.com Hello, I am trying to get all my categories to show on a shop category page. I've used the code below by @tuanphan but there's an alignment issue with the 'All' category that I can't seem to fix. /* Show category nav links */ div.nested-category-tree-wrapper { display: flex !important; float: none !important; min-width: 100% !important; max-width: 100% !important; margin-right: 0 !important; } section.products.collection-content-wrapper.products-list { flex-direction: column !important; display: flex; } .nested-category-tree-wrapper>ul { width: 100% !important; display: flex; justify-content: center; align-items: center; } .nested-category-tree-wrapper>ul li { margin-left: 2vw; } nav.nested-category-breadcrumb { display: none !important; } ul.nested-category-children { display: none !important; } If you look at the attached photo, you'll see it sits slightly higher than the categories on the row. Url is: https://www.fernandacortina.com/prints/store/fine-art
-
That worked! Thank you very much
-
The link is https://www.fernandacortina.com/deep-blue
-
Site URL: https://fernandacortina.com/ Hello, I am trying to center the last product on one of my shop pages so it's not aligned to the left. Can't figure out the right CSS for it.
-
Site URL: http://www.fernandacortina.com Hello, I am trying to reduce the side padding for my products page only with some CSS.
