How to change image height on mobile

I am trying to change the height of my image on the mobile version of my site. 

I have an image in an overlay format which looks great on the desktop version, but when switching to mobile it's too large. I would like to reduce its height whilst still keeping it at full width.

Also...any idea how to remove that annoying bit of blank space at the top which seems to only appear on mobile?

Can you share link to page in screenshot? We can check easier.

Hi Tuan the site is not yet live. Am I still able to share it with you?

If your site is trial, you can setup password & share url.

Hi Tuan,

Is there a way to do this on my product page too so that the image and the options below can be seen together (without scrolling down)? Or it would be good if there is a code where line spacing can be changed on the mobile product page.

On 9/12/2020 at 4:19 PM, tuanphan said:

Can you share link to page in screenshot? We can check easier.

https://www.bijouxcreative.com/new-page-4

There is also lots of blank space at the top and bottom of the image which I would like to remove. Any ideas?

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1599913217162_4577 {
    padding-bottom: 0 !important;
}

On 9/19/2020 at 4:03 PM, tuanphan said:

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1599913217162_4577 {
    padding-bottom: 0 !important;
}

 

Thanks so much! This worked but only on that specific page. 

How do I apply it to all pages?

On 9/21/2020 at 11:28 PM, bijouxcreative said:

Thanks so much! This worked but only on that specific page. 

How do I apply it to all pages?

Repeat code with other block id.

Find ID with this tool. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde