oscarmay_

Thank you so much, Tuanphan, that worked well for me!

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;}}