JOF01 Posted September 4, 2023 Share Posted September 4, 2023 (edited) Hi All, I'm 80% there on styling my galleries, just need help with the last 20%! I'm using 2 gallery styles; slideshow simple for the top, slideshow reel for the bottom. Everything's perfect on desktop, but I'd like the mobile versions to look exactly the same as the bottom gallery (minus the background strip at the bottom, which i can't seem to get rid of). Also, I'd like to increase the size of the nav arrows on both desktop and mobile. So, full width, with overlayed larger nav buttons on the sides. site: https://www.form-and-function.net/work/circuit-zdy48 password: formandfunction Thanks for any help! Edited September 4, 2023 by JOF01 picture edit Link to comment
tuanphan Posted September 6, 2023 Share Posted September 6, 2023 Hi, The url doesn't work now. Can you check it again? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JOF01 Posted September 19, 2023 Author Share Posted September 19, 2023 (edited) Hi Tanphuan, Sorry about that, not sure what happened there. Page is here: https://www.form-and-function.net/work/brand-identity Password: formandfunction To recap, there are 3 parts to this: 1. Consistent gallery styling on mobile (like the full bleed slideshow reel at the bottom of the page). It could be simplest to duplicate this and copy it under the first simple slideshow, then do some hide/show css on mobile or desktop? But then I'm mindful of keeping the site as simple as possible. 2. Hide green the strip under the bottom gallery on mobile. 3. Increase the size of the nav arrows on both desktop and mobile. Thanks again for any light you can shed on this! Edited September 19, 2023 by JOF01 Link to comment
tuanphan Posted September 21, 2023 Share Posted September 21, 2023 #1. #2. Add to Website > Website Tools > Custom CSS > then save & reload the page @media screen and (max-width:767px) { [data-section-id="64f589575a63794fbede781e"] .gallery-reel { height: 20vh !important; } [data-section-id="64f589575a63794fbede781e"] .gallery-reel-list { margin: 0 !important; } } #3. Where is nav arrow? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JOF01 Posted September 27, 2023 Author Share Posted September 27, 2023 (edited) Hi Tuanphuan - we're almost there! See current status: https://www.form-and-function.net/work/brand-identity Password: formandfunction Unfortunately with the above code snippet added, the images were getting cropped. I found this code in one of your posts on another thread, which should do what I'm after, but it doesn't work on my site for some reason: @media screen and (max-width:767px) { .gallery-fullscreen-slideshow [data-width="full-bleed"] { height: 15vh !important; } } I'd like the images on mobile to be dispayed full width, with no cropping. I'd also like the captions to display underneath the images, but at the moment I think they're picking up some previous css styling for desktop, so have way too much space at the bottom (as you can see on the top mobile slideshow gallery). Lastly, the navigation arrows can be seen on the top slideshow. I'd like them to be at least twice larger. Hope that makes sense - as always thank you so much for your help... Screengrab to show top slideshow: Edited September 27, 2023 by JOF01 Link to comment
tuanphan Posted December 22, 2023 Share Posted December 22, 2023 I see you solved Image crop, with arrow size, you can use this CSS code @media screen and (max-width:767px) { .gallery-slideshow-control-btn .caret-right-icon--small, .gallery-slideshow-control-btn .caret-left-icon--small { width: 30px !important; height: 50px !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment