Change size of portfolio image crop on mobile using code

Hi,

This should be simple, but I'm struggling!

I'm trying to change the size of the portfolio section and the images within it on mobile with code, as the preset sizes crop the images way too big (see screenshot).

I can't seem to target the section or the images...

Site is here: olive-sapphire-x7b5.squarespace.com

Any help appreciated!

The site is private. Can you setup an access password? We can access easier

Hi Tuanphan - thanks for your help.

Website is: www.form-and-function.net

Password is: formandfunction

You try adding this to Design > Custom CSS or Website > Website Tools > Custom CSS

/* resize portfolio on homepage */
@media screen and (max-width:767px) {
.portfolio-hover[data-mode="hover-cover"] {
    min-height: unset !important;
    height: 30vh;
}
}

Hi TuanPhan, thanks again for this. 

Unfortunately it's not quite what I want - I've applied the CSS and you'll see there is a difference between the cover image and the hover-state portfolio images.

I'm looking to recreate the same effect as the desktop version, which works really well, but with both the cover and all hover states positioned, aligned and cropped in the same way. This way, the content is is perfectly aligned and centred on hover. 

Also, for mobile only is there a way of horizontally aligning the text, to give more screen space for the image?

I would also like to hug the text to the bottom of the screen (customising desktop and mobile padding depths) so it sits closer to bottom of page (homepage won't have a footer, so portfolio image position should be absolute). 

Any CSS to target this?

Thanks again!

Sorry. Missed your comment. Do you still need help?

Yes please! 

Basically I'd like the portfolio cover page and hover state images a customisable size on mobile. I will have no footer on the cover page, so would like the frame to automatically fill the page, with content a customisable size to fit the focus area in the frame and give enough margin for the hover links to be readable... 

At the moment desktop works fine, but mobile content is oversized and overflows outside of the mobile screen. I can add more border to the images if necessary, but still want the main focal area of the images visible on mobile. If it's an easier workaround, I can create separate portrait images for mobile.

Also, i've figured out the vertical padding for hover links, but would like to split the hover links on mobile over 2 lines (ie. not vertically stacked).

Cheers again! 

Hi @tuanphan - any ideas about this? Thanks.

Nailed it! @tuanphan thank you! - have spent at least a day trying to figure this out!