Jump to content

Resizing image to fit landscape on mobile view

Recommended Posts

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.

IMG_3381.thumb.jpeg.11cb2c614418774f49efed0da20f27f9.jpeg

IMG_3382.thumb.jpeg.28fabcebaeb0238b0e9cabcfa3806efc.jpeg

 

 

Link to comment
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.

IMG_3381.thumb.jpeg.11cb2c614418774f49efed0da20f27f9.jpeg

IMG_3382.thumb.jpeg.28fabcebaeb0238b0e9cabcfa3806efc.jpeg

 

 

Do you mean zooming in your image when landscape on mobile view?

Edited 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

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 by kinglear
Link to comment
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;
}
}

 

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
  • 2 years later...

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
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.