Blackbell Posted August 30, 2023 Share Posted August 30, 2023 (edited) Hi, Site URL https://caterpillar-crocodile-jbdl.squarespace.com/config/pages Could someone please help me input the correct code to change the height of our banner slideshow on the homepage for mobile? Happy with sizing on desktop. I've tried inputing a couple different ones but I must be missing something. Cheers in advance Edited August 30, 2023 by Blackbell Link to comment
Solution Lesum Posted August 31, 2023 Solution Share Posted August 31, 2023 @Blackbell Here's a code snippet to adjust the banner slideshow height on mobile: @media only screen and (max-width: 640px) { .user-items-list-banner-slideshow .slides { min-height: 30vh !important } } You can adjust "30vh" in the code. Let me know how it goes. Thanks! Blackbell 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Blackbell Posted August 31, 2023 Author Share Posted August 31, 2023 Nailed it! Thank you so much! Link to comment
Innisfree77 Posted April 1 Share Posted April 1 (edited) Hi there this solution is the first one to sort of helping me with my similar issue but not entirely. It doesn't matter how I adjust the height and width I can't seem to get the images to fit the mobile screen... and added kink might be that I have a card on my images... can someone please look at my site and tell me what I'm missing... www.sweetwatermusicfestival.ca. Edited April 1 by Innisfree77 Wanted to add more detail. Link to comment
tuanphan Posted April 3 Share Posted April 3 On 4/2/2024 at 2:40 AM, Innisfree77 said: Hi there this solution is the first one to sort of helping me with my similar issue but not entirely. It doesn't matter how I adjust the height and width I can't seem to get the images to fit the mobile screen... and added kink might be that I have a card on my images... can someone please look at my site and tell me what I'm missing... www.sweetwatermusicfestival.ca. You can use this code to Website > Website Tools > Custom CSS @media screen and (max-width:991px) { .user-items-list-item-container[data-section-id="61f48c737bdd1d5866b6e367"] ul { min-height: unset !important; } .user-items-list-item-container[data-section-id="61f48c737bdd1d5866b6e367"] img { object-fit: contain !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
Innisfree77 Posted April 4 Share Posted April 4 Thank you so much for your help. This worked great for the photos and I hate to be a pain, but is there a way to adjust the text over the photos. Or is there another solution to this problem (see attached screenshots)? I'm sure there must be a way to code the text differently for mobiles, I'm just not sure if I can adjust in the regular settings or if it needs to be additional CSS. Thank you again! Link to comment
tuanphan Posted April 7 Share Posted April 7 On 4/5/2024 at 2:41 AM, Innisfree77 said: Thank you so much for your help. This worked great for the photos and I hate to be a pain, but is there a way to adjust the text over the photos. Or is there another solution to this problem (see attached screenshots)? I'm sure there must be a way to code the text differently for mobiles, I'm just not sure if I can adjust in the regular settings or if it needs to be additional CSS. Thank you again! I don't quite understand. What is problem in your screenshot? 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
Innisfree77 Posted April 10 Share Posted April 10 The "card" doesn't resize to layover the image proportionately, so the image reduces and fits to width which is fantastic but because the "card" doesn't resize, it covers the whole photo, is there a way to adjust the card/font sizes for mobile so that it resizes proportionately to the photo. Does that make sense? 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