kinglear Posted October 25, 2021 Share Posted October 25, 2021 Site URL: https://disc-cone-hl9f.squarespace.com/ Hi, Our website is starting to really come together thanks to all the help on the forums. One thing I'm having an issue with and can't seem to find a fix for is landscape view on mobile. Our home page has a background image with our logo as another image sitting on top. This resizes perfectly to mobile when held in portrait but if I turn the phone sideways to landscape the logo image fits the screen width ways but cuts the top and bottom off and looks really messy. Is there a way round this - i.e to force it to display the image resized to fit the height of the phone screen and not the width? pass : kinglear Many thanks. Link to comment
Beyondspace Posted October 25, 2021 Share Posted October 25, 2021 (edited) 1 hour ago, kinglear said: Site URL: https://disc-cone-hl9f.squarespace.com/ Hi, Our website is starting to really come together thanks to all the help on the forums. One thing I'm having an issue with and can't seem to find a fix for is landscape view on mobile. Our home page has a background image with our logo as another image sitting on top. This resizes perfectly to mobile when held in portrait but if I turn the phone sideways to landscape the logo image fits the screen width ways but cuts the top and bottom off and looks really messy. Is there a way round this - i.e to force it to display the image resized to fit the height of the phone screen and not the width? pass : kinglear Many thanks. Do you mean zooming in your image when landscape on mobile view? Edited October 25, 2021 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
kinglear Posted October 25, 2021 Author Share Posted October 25, 2021 (edited) Not really. I'm referring to the logo image element (the ear dude and the King Lear) rather than the background image it's sitting on top of (they're 2 different blocks). I mean, when I rotate my phone to landscape mode the logo image is stretched to the width of the screen, which makes the top and bottom of the screen cut it off. Ideally I would love for the image to be resized to fit the top and bottom of the screen, making it smaller and therefore being able to see the whole logo image. Hope that makes sense! Edited October 25, 2021 by kinglear Link to comment
tuanphan Posted October 27, 2021 Share Posted October 27, 2021 On 10/25/2021 at 10:40 PM, kinglear said: Not really. I'm referring to the logo image element (the ear dude and the King Lear) rather than the background image it's sitting on top of (they're 2 different blocks). I mean, when I rotate my phone to landscape mode the logo image is stretched to the width of the screen, which makes the top and bottom of the screen cut it off. Ideally I would love for the image to be resized to fit the top and bottom of the screen, making it smaller and therefore being able to see the whole logo image. Hope that makes sense! Add to Design > Custom CSS @media screen and (max-width:767px) and (orientation:landscape) { div#block-8e3f39d0b0c1b95def54 { width: 30%; margin: 0 auto; } } kinglear and LouLouHarvey 1 1 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
kinglear Posted October 27, 2021 Author Share Posted October 27, 2021 @tuanphan to the rescue again. Top work, thanks. Link to comment
ClareRobinsonPhotography Posted January 7 Share Posted January 7 Hello, Im looking for some help and I've looked at so many previous posts, the suggested code and tried to change it using my ID blocks but I cant make it work. I have a landscape image at the top of my website (www.clare-robinson.co.uk) and in mobile view I would like it to remain landscape rather than the standard zoomed in version on mobile. Please can someone help me Im totally at a loss. I think this is the right block ID section[data-section-id="63fa1aea0df9041564222c5c"] Thank you. Link to comment
tuanphan Posted January 9 Share Posted January 9 On 1/7/2024 at 5:47 PM, ClareRobinsonPhotography said: Hello, Im looking for some help and I've looked at so many previous posts, the suggested code and tried to change it using my ID blocks but I cant make it work. I have a landscape image at the top of my website (www.clare-robinson.co.uk) and in mobile view I would like it to remain landscape rather than the standard zoomed in version on mobile. Please can someone help me Im totally at a loss. I think this is the right block ID section[data-section-id="63fa1aea0df9041564222c5c"] Thank you. Try adding this to Website Tools (under Not Linked) > Custom CSS @media screen and (max-width:767px) { [data-section-id="63fa1aea0df9041564222c5c"] { min-height: unset !important; height: 40vh !important; } [data-section-id="63fa1aea0df9041564222c5c"] .html-block { position: relative; top: 110px; } } 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