Photo Resizing on Mobile (for blog)

Site URL: https://www.hempconnect.co.nz/recipes-1/2020/4/12/hemp-connect-vegan-hemp-cheese

We are having trouble figuring out how to adjust our Blog, Recipe and Article images so that they are fitting on mobile devices.  Desktop is fine but see in the attached photos that shows how all of the photos are cut short with the grey block.  Any help/advice in rectifying would be greatly appreciated. 

Same thing for us I think.   Just started a new domain which looks fine using desktop, but using safari/iphone the sizing is not adjusting down in size.   

In Custom CSS, remove this code

.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster {
    height: 500px;
    position: relative
}

.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img {
    height: 500px !important;
    object-fit: cover
}

if you want to change height on desktop only, remove it & use this code

@media screen and (min-width:992px) {
.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster {
    height: 500px;
    position: relative;
}

.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img {
    height: 500px !important;
    object-fit: cover;
}
}

Hi Tuan

Thanks so much for your wonderful response as we have now fixed the mobile issue with your suggestion.  The only issue now is that I have uploaded the second (replacement) code as you suggested but cannot change the height on the desktop images (example attached).

I tried changing the 500px (both) in the code you provided to 150px, 250px etc but it did not seem to adjust the height of the picture.

Would you be so kind as to advise where I am going wrong??  I have also attached a picture of the code as entered on square space.

Warm regards,

Jacob 

On 9/25/2020 at 2:47 PM, tuanphan said:

In Custom CSS, remove this code

.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster {
    height: 500px;
    position: relative
}

.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img {
    height: 500px !important;
    object-fit: cover
}

if you want to change height on desktop only, remove it & use this code

@media screen and (min-width:992px) {
.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster {
    height: 500px;
    position: relative;
}

.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img {
    height: 500px !important;
    object-fit: cover;
}
}