Taly Posted December 27, 2022 Share Posted December 27, 2022 Hi! I recently redesigned my website and added images from my mobile app onto the site so that users can see how it works. Unfortunately, I've found that the built in responsive-layout for my site doesn't play well with the reformatted design. I've tried adding mobile breakpoints and re-aligning elements using CSS to get the mobile layout how I'd like, but there are a few places where I can't seem to adjust images or layouts. I know this is an incredibly talented community and I'm hoping someone can offer some advice A few specifics that I'm struggling with: I have an image in my 'hero' area which doesn't resize at mobile breakpoints and instead shows up as a tiny tiny image on mobile (screenshots attached) Does anyone know whether it is possible to keep the image at a more readable size or maybe make it scroll behind the text/buttons? Note: I've tried variations of the following CSS, but it doesn't seem to impact the image @media screen and (max-width:640px) { #yui_3_17_2_1_1672111932636_71 { width: 60% !important; height: 100% !important; margin: 0 auto; } } In the 'body' of my page, I have an alternating side layout with mobile phone images and descriptions. These appear in the layout I want on desktop devices, but after mobile breakpoints the images get oddly cut off and don't align how I'd like - specifically one of the images at the top of the section gets slid in at the bottom of the stack on mobile. I tried hiding this image, but then end up with a big blank spot on mobile (screenshot attached of where the image would appear but now just shows the blank area) Thank you! Taly Link to comment
Solution Beyondspace Posted December 27, 2022 Solution Share Posted December 27, 2022 9 hours ago, Taly said: Hi! I recently redesigned my website and added images from my mobile app onto the site so that users can see how it works. Unfortunately, I've found that the built in responsive-layout for my site doesn't play well with the reformatted design. I've tried adding mobile breakpoints and re-aligning elements using CSS to get the mobile layout how I'd like, but there are a few places where I can't seem to adjust images or layouts. I know this is an incredibly talented community and I'm hoping someone can offer some advice A few specifics that I'm struggling with: I have an image in my 'hero' area which doesn't resize at mobile breakpoints and instead shows up as a tiny tiny image on mobile (screenshots attached) Does anyone know whether it is possible to keep the image at a more readable size or maybe make it scroll behind the text/buttons? Note: I've tried variations of the following CSS, but it doesn't seem to impact the image @media screen and (max-width:640px) { #yui_3_17_2_1_1672111932636_71 { width: 60% !important; height: 100% !important; margin: 0 auto; } } In the 'body' of my page, I have an alternating side layout with mobile phone images and descriptions. These appear in the layout I want on desktop devices, but after mobile breakpoints the images get oddly cut off and don't align how I'd like - specifically one of the images at the top of the section gets slid in at the bottom of the stack on mobile. I tried hiding this image, but then end up with a big blank spot on mobile (screenshot attached of where the image would appear but now just shows the blank area) Thank you! Taly Have you tried the fluid engine which allow you to change layout based on your device? https://recordit.co/nsyvNN1PbL Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Taly Posted December 27, 2022 Author Share Posted December 27, 2022 Hi! Thank you for the suggestion, this was such a simple fix! I've used Squarespace for years and had no idea that this was possible. Oddly, most of the articles on the internet about making custom changes to your site do not note that it is possible to edit the mobile version directly in Squarespace without resorting to custom CSS. 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