brandon
Circle Member-
Posts
2,215 -
Joined
-
Last visited
-
Days Won
29
brandon last won the day on August 20 2018
brandon had the most liked content!
Personal Information
- Website
-
Location
Kalamazoo, MI
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
brandon's Achievements
-
GretchenElizabeth reacted to a post in a topic: Gallery Caption workarounds for 7.1?
-
Photograffix started following brandon
-
JUSTIN1234 started following brandon
-
Disable Auto Zoom / Cropping on Individual Product Images
brandon replied to fantasiummedia's topic in Customize with code
Something like this should work: .gallery-lightbox-item img { width: 100% !important; object-fit: contain; }- 20 replies
-
@noemipossible11 and @douglasmcg: I'll try to come up with something for you in the next week or so. I've got some ideas. @lisagravy: Can you provide a link to the page in question?
- 336 replies
-
@gabmartinez7: Try adding the JS via a markdown block in the footer of your site.
- 336 replies
-
Hi @totaljoy. It looks like that gallery block was added using a third-party extension and not using 7.1 galleries, so this thread and the code here won't apply. I'd recommend contacting the maker.
- 336 replies
-
On that page, it looks to me like captions are showing, not filenames @gabmartinez7. It seems you got that sorted. As to the overlapping of the description over the image, that's a matter of adjusting the CSS. I'd use a combination of font-size, line-height, and flexbox to get things looking better. I might also override the overall height of that gallery (currently set at 75vh). If that doesn't give you enough to get things the way you want, send me a direct message.
- 336 replies
-
Hi @JanelleNine. Here's a bit of code you can use to get you started. If you add other galleries to the the site and only want to target this one, you'll want to adapt the CSS a bit. .gallery-fullscreen-slideshow { height: auto !important; } .gallery-fullscreen-slideshow-list { max-height: 100vh; } Let me know how it goes for you. EDIT 7/22/2020: In some cases, for mobile, you may also need something like @media screen and (max-width: 767px) { .gallery-fullscreen-slideshow[data-height="L"] { height: auto !important; } .gallery-fullscreen-slideshow-item img { object-fit: contain !important; } } -Brandon
-
No problem @Charlest93. Don't forget to post a like/thank on helpful posts.
- 336 replies
-
Ah, sorry about @Charlest93. I forgot you had already sent a link earlier in this post. Also, your English is much better than my French! What you want can be accomplished with CSS alone. However, it does require an understanding of it, and being comfortable using your browser's web inspector to identify elements and get them looking like you want. I've written some additional CSS you can add that should help you get a start on it. However, while you can certainly add the following CSS after what you already have, it'd be better to review it and edit your existing CSS to minimize overlap. @media screen and (max-width: 767px) { .gallery-grid-item { padding-bottom: 0; margin-bottom: 30px; } .gallery-item-description { padding: 0 !important; top: 50%; transform: translateY(-50%); bottom: inherit !important; font-size: 1em; } } Let me know how that works for you.
- 336 replies
-
@gabmartinez7: If you're seeing a filename, that is likely because you have not entered description text. See the third bullet point under "JavaScript" in the original answer. However, if that's not the cause, then could you provide a link to the page in question? @Charlest93: I'm not sure what you mean by "get the same codes". Having said that, I did take another look at the CSS for the "Slideshow" gallery type where thumbnails are displayed, and I realized that things weren't displaying quite right on mobile. So I made a small adjustment. You could try using the updated CSS in my original post. If that doesn't work, can you provide a link to the page in question?
- 336 replies
-
@Charlest93 : I see you figured it out. Also, if a post helps you out, don't forget to post a like/thanks on it.
- 336 replies
-
Hi @Charlest93. Here's what I think you're looking for: .gallery-item-description { text-align: center; pointer-events: none; }
- 336 replies
-
This is an update to let you know that I've added just a couple lines of CSS to fix the issue with the lightbox caption delay/lag issue. The lines are added at the end of the CSS in the original post. They are: transition: opacity 0.1s ease-out; .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } Special note to those who mentioned the issue: @kinapark , @IvanOB , @ed.design , @JohnS123
- 336 replies
-
Glad to hear it @JanBrick and @luxpacifica. Don't forget to like the original post if you didn't already.
- 336 replies
-
Hey @Meeeee. Paul can certainly clarify if/when he can, but at the bottom of the page it says: "The wishlist cannot be used in conjunction with the cart/checkout. It completely replaces the cart and is designed for websites that do not take payments online (sales or donations)."
-
Hi @j03ie. It is necessary to add both the CSS and the JavaScript. Take another look at the instructions and be sure you follow them fully, both parts. If you get it up and running, changing how the captions display is a matter of editing the CSS to your liking.
- 336 replies