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!

On 9/5/2023 at 2:32 AM, tuanphan said:

Use this new CSS code

@media screen and (max-width: 767px) {
.portfolio-hover[data-mode="hover-cover"] {
    min-height: unset !important;
    height: 70vh;
}
    .portfolio-hover-display {
        min-height: unset;
}

ul.portfolio-hover-items-list, .portfolio-hover-items-list li {
    display: inline-block !important;
    padding-left: 0 !important;
    padding-right: 0 !important
}

 .portfolio-hover-items-list li span {
   font-size: 15px;
}}

 

I'm trying to resize my portfolio images on mobile only as well, but the code isn't working. my site is www.ryanlongnecker.com, i would also like to move the scroll left/right buttons to move up in the mobile screen so they are visible

On 3/15/2024 at 12:02 AM, RLongnecker said:

I'm trying to resize my portfolio images on mobile only as well, but the code isn't working. my site is www.ryanlongnecker.com, i would also like to move the scroll left/right buttons to move up in the mobile screen so they are visible

Which page are you referring to? Brands, Photography or?

13 hours ago, tuanphan said:

Which page are you referring to? Brands, Photography or?

Both. I would like them both to display the projects either with smaller images or ideally using the grid:masonry layout on mobile and grid:strips on desktop

On 3/17/2024 at 5:58 AM, RLongnecker said:

Both. I would like them both to display the projects either with smaller images or ideally using the grid:masonry layout on mobile and grid:strips on desktop

You mean resize these images?

8 hours ago, tuanphan said:

You mean resize these images?

no, i meant the images that show up when you click into the portfolio item. so clicking on any of those images will take you to the portfolio item I was talking about. I think it's a non-issue now though, thank you

On 3/20/2024 at 12:46 AM, RLongnecker said:

no, i meant the images that show up when you click into the portfolio item. so clicking on any of those images will take you to the portfolio item I was talking about. I think it's a non-issue now though, thank you

Okay. If you have any problems in the future, you can let me know