BenCLKE Posted September 1, 2021 Share Posted September 1, 2021 Site URL: https://www.boombattlebar.co.uk/ Hello, I've just added a video to my sites header with a mobile fall-back image. However, the mobile fall-back image is quite small, how do I increase the height of the mobile image? https://boombattlebar.co.uk/ Many thanks! Link to comment
Solution KwameAndCo Posted September 1, 2021 Solution Share Posted September 1, 2021 Hi Ben, small world, I think we may have a mutual frind! Anyhow, the issue is partly to do with having parallax turned on. The following should help: @media (max-width: 640px) { /*Image - ensure min-height is larger than section*/ img.custom-fallback-image.loaded { min-height: 60vh; } /*Sectioon*/ #collection-612c9ebd5d3d1a3a142c6c28 .Intro.Intro--has-image, #collection-612c9ebd5d3d1a3a142c6c28 .Parallax-item { min-height: 50vh; } } tuanphan 1 Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
BenCLKE Posted September 10, 2021 Author Share Posted September 10, 2021 On 9/1/2021 at 6:24 PM, Kwamzilla said: Hi Ben, small world, I think we may have a mutual frind! Anyhow, the issue is partly to do with having parallax turned on. The following should help: @media (max-width: 640px) { /*Image - ensure min-height is larger than section*/ img.custom-fallback-image.loaded { min-height: 60vh; } /*Sectioon*/ #collection-612c9ebd5d3d1a3a142c6c28 .Intro.Intro--has-image, #collection-612c9ebd5d3d1a3a142c6c28 .Parallax-item { min-height: 50vh; } } Hey Kwam! This has worked! Thank you so much, apologies for the delayed response. I'm also trying to get the images to display 2 wide on mobile as opposed to one under the other. Do you have any ideas? 🙂 KwameAndCo 1 Link to comment
KwameAndCo Posted September 10, 2021 Share Posted September 10, 2021 14 hours ago, BenCLKE said: I'm also trying to get the images to display 2 wide on mobile as opposed to one under the other. Do you have any ideas? 🙂 For the main section on the homepage? OR other pages too? 14 hours ago, BenCLKE said: Hey Kwam! This has worked! Thank you so much, apologies for the delayed response. Super! If you can mark it as the "best answer" it'll help others with the same issue find a solution quicker 🙂 Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
BenCLKE Posted September 15, 2021 Author Share Posted September 15, 2021 On 9/10/2021 at 11:34 PM, Kwamzilla said: For the main section on the homepage? OR other pages too? Super! If you can mark it as the "best answer" it'll help others with the same issue find a solution quicker 🙂 For the main sectionon the homepage 🙂 KwameAndCo 1 Link to comment
KwameAndCo Posted September 15, 2021 Share Posted September 15, 2021 6 hours ago, BenCLKE said: For the main sectionon the homepage 🙂 You've shot yourself in the foot there, mate, by using image blocks. My suggestion would be to rebuild that section using a Gallery Block (You're on 7.0 Bedford right?) as it will be easier to manage in future and less fiddly with code and less likely to break in general for things like this. That said, this one actually isn't too hard and should work with: @media (max-width: 640px) { #collection-612c9ebd5d3d1a3a142c6c28 .sqs-col-3 { width: 50%!important; float: auto!important; } } It's not too bad in this instance but using native blocks tends to be better imo. Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
BenCLKE Posted September 16, 2021 Author Share Posted September 16, 2021 20 hours ago, Kwamzilla said: You've shot yourself in the foot there, mate, by using image blocks. My suggestion would be to rebuild that section using a Gallery Block (You're on 7.0 Bedford right?) as it will be easier to manage in future and less fiddly with code and less likely to break in general for things like this. That said, this one actually isn't too hard and should work with: @media (max-width: 640px) { #collection-612c9ebd5d3d1a3a142c6c28 .sqs-col-3 { width: 50%!important; float: auto!important; } } It's not too bad in this instance but using native blocks tends to be better imo. That's very helpful & makes sense! thanks again Kwam 🙂 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