Resizing image to fit landscape on mobile view

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.

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?

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!

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

@tuanphan to the rescue again.

Top work, thanks.

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.

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