How do I make an image block NOT maintain its original proportions when scaled down to mobile view?

Site URL: https://seadragon-poodle-hstd.squarespace.com/

Hi all, 

I have a page on my test website that features a poster image block. The image is pretty wide and has a narrow height, which looks perfect on a desktop screen. However, when the page is scaled down to mobile view, that wide and narrow image block looks very small due to it maintaining its original proportions.

I want it to act like a banner image on Squarespace 7.1, where the banner image doesn't really shrink, but everything else does (otherwise you'd be left with an extremely narrow banner image).

I've attached an image that shows the problem. Any advice would be appreciated!

Site Password: 123

I figured out the answer to my question. The CSS I used is pasted below.

To change the height, just change the height value of the first chunk of code.

.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-inset{
    position: relative;
  width: auto;
  height: 400px;
  padding-bottom: 0px !important;
  }
 
.sqs-block-image img{position: absolute;
  width: auto;
  height: auto !important;
  object-fit: cover;}   

Hi @floraparthneium, 

I'm unable to figure out how to properly edit the CSS on your site merely in the command console; it'd probably be easier to do in your Squarespace CSS editor. Given that your image is a different type of image than mine, I don't know exactly how to replicate the effect.

I can however offer a different solution--one I was going to use had I not figured out the above solution to my problem.

What we are going to do is have a cropped image that replaces the original desktop image as soon as your website goes into tablet or mobile view. All you have to do is take your "barnabas poffley" image and crop it in Photoshop (or any image editor). Just crop it down to the width you'd want it to have on mobile or tablet view. Then you:

1. Create an image block right below your original one and upload your newly edited cropped picture.

2. In your CSS editor, you need to use media queries to control when you want your cropped picture to appear and disappear. Same goes for your original image.

1.  To make your new cropped image disappear in desktop view, enter:
   
   @media only screen and (min-width: 834px) {#block-id {display: none;}}
    
2.  To make your original image disappear in mobile view, enter:
   
   @media only screen and (max-width: 834px) {#block-id {display: none;}}

So what happens is as soon as your website resizes to a width greater than 834px (switching into desktop view), the cropped image disappears and the original image reappears. Once the browser width falls below 834px, the original image disappears and the cropped image appears. 

Just make you you enter the correct image block id number into the "#block-id {display: none;}".

If the strings of code end up flipping which image shows at mobile and desktop views, just change "min-width" to "max-width", vice versa. I'm pretty sure I gave you the correct order though.

I hope this workaround helps!

Thank you for taking the time to explain this @roem, this works perfectly and you have made my day.

Best,

Flora