jsugp Posted January 18, 2023 Share Posted January 18, 2023 I want to edit our homepage gallery slideshow on mobile only so that it shows the max width without cropping the height or stretching the image. This is the code I tried using to show the full images in the gallery, but now it won't show the the navigation arrows on the sides nor the image descriptions (should be centered like how it is on the desktop). <STYLE> @media screen and (max-width:640px) { section#home-gallery img { width: 100% !important; left: 0 !important; height: auto !important; } section#home-gallery { height: 210px; } }</STYLE> *Note: I don't mind if the width of the images is cropped slightly. It just can't be cropped to the point of how it looks without any custom code. As long as you can read "Collin" and "UGP" on the first image in the gallery, that's fine with me. Link to comment
tuanphan Posted January 19, 2023 Share Posted January 19, 2023 Can you share link to page where you use slideshow? We can check easier 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
jsugp Posted February 1, 2023 Author Share Posted February 1, 2023 On 1/19/2023 at 3:36 PM, tuanphan said: Can you share link to page where you use slideshow? We can check easier Hey Tuan, It's the top gallery of our home page: http://urbangolfperformance.com/ Link to comment
tuanphan Posted February 3, 2023 Share Posted February 3, 2023 On 2/2/2023 at 2:02 AM, jsugp said: Hey Tuan, It's the top gallery of our home page: http://urbangolfperformance.com/ Try adding this code under <style> @media screen and (max-width:640px) { .tweak-index-gallery-controls-large-arrows .Index-gallery-control { top: 15% !important; } } </style> 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
jsugp Posted February 7, 2023 Author Share Posted February 7, 2023 On 2/3/2023 at 12:05 AM, tuanphan said: Try adding this code under <style> @media screen and (max-width:640px) { .tweak-index-gallery-controls-large-arrows .Index-gallery-control { top: 15% !important; } } </style> This worked to show the arrows, but unfortunately it still crops the image 😞 Is there a way to show the arrows but also show the entire image instead of cropping it to fit mobile? Link to comment
jsugp Posted February 7, 2023 Author Share Posted February 7, 2023 On 2/3/2023 at 12:05 AM, tuanphan said: Try adding this code under <style> @media screen and (max-width:640px) { .tweak-index-gallery-controls-large-arrows .Index-gallery-control { top: 15% !important; } } </style> Disregard my initial reply. I added this after my initial code and it works to show the full width of the image + the arrows. Now it's just missing the image titles. They should display on the center of the image (if you view on desktop, you'll see it). Link to comment
Solution tuanphan Posted February 11, 2023 Solution Share Posted February 11, 2023 On 2/8/2023 at 2:57 AM, jsugp said: Disregard my initial reply. I added this after my initial code and it works to show the full width of the image + the arrows. Now it's just missing the image titles. They should display on the center of the image (if you view on desktop, you'll see it). Use this new code <style> @media screen and (max-width:640px) { section#home-gallery img { width: 100% !important; left: 0 !important; height: auto !important; } section#home-gallery { height: 210px; } section#home-gallery article.Index-gallery-item { height: 210px !important; } .tweak-index-gallery-controls-large-arrows .Index-gallery-control { top: 15% !important; } } </style> 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