oscarmay_
-
Posts
4 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by oscarmay_
-
-
Site URL: https://www.oscarmay.com/
Hi there,
I wonder if anyone can help me. The images on my site are quite off-center when viewing my site on a mobile (particularly noticeable when looking at an image in lightbox). I realise it could be something to do with the custom css I have used, but I can't identify how to fix it!
Is there something I can do to re-centre them?the website is https://www.oscarmay.com
Many thanks,
Oscar
-
That fixed it, thank you so much!
-
Site URL: https://www.oscarmay.com/
Hi there,
I've been using custom css to have captions appear when hovering on the image. They've been working great for a long time, but I checked the website earlier and the image is not displaying unless I hover over the image.
I did add some extra code to the custom css the other day (changing responsiveness of gallery at certain media sizes), the site seemed to work ok at first, now it isnt.
Hopefully someone may be able to help 🙏
The website is; www.oscarmay.com
This is the code I have in place right now;
figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; background-color: #e0e0e0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 1000ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 85% !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: #e0e0e0; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 100ms !important; } .gallery-masonry-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.50; } /* remove gap */ figcaption { padding: 0 !important; } figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; background-color: #e0e0e0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 1000ms !important; opacity: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-content { opacity: 75% !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #e0e0e0; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 100ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.40; } /* remove gap */ figcaption { padding: 0 !important; } @media only screen and (max-width: 1400px) { .gallery-masonry .gallery-masonry-wrapper { columns: 2; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 14px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } } @media only screen and (max-width: 750px) { .gallery-masonry .gallery-masonry-wrapper { columns: 1; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 3px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } } @media only screen and (max-width: 750px) { h1 {font-size:28px!important;}}
Images seem to be shifted to the right in mobile view
in Customize with code
Posted
Thank you so much, Tuanphan, that worked well for me!