JOF01

Hi Tuanphuan - we're almost there! See current status: https://www.form-and-function.net/work/brand-identity Password: formandfunction Unfortunately with the above code snippet added, the images were getting cropped. I found this code in one of your posts on another thread, which should do what I'm after, but it doesn't work on my site for some reason: @media screen and (max-width:767px) { .gallery-fullscreen-slideshow [data-width="full-bleed"] { height: 15vh !important; } } I'd like the images on mobile to be dispayed full width, with no cropping. I'd also like the captions to display underneath the images, but at the moment I think they're picking up some previous css styling for desktop, so have way too much space at the bottom (as you can see on the top mobile slideshow gallery). Lastly, the navigation arrows can be seen on the top slideshow. I'd like them to be at least twice larger. Hope that makes sense - as always thank you so much for your help... Screengrab to show top slideshow:

Hi Tanphuan, Sorry about that, not sure what happened there. Page is here: https://www.form-and-function.net/work/brand-identity Password: formandfunction To recap, there are 3 parts to this: 1. Consistent gallery styling on mobile (like the full bleed slideshow reel at the bottom of the page). It could be simplest to duplicate this and copy it under the first simple slideshow, then do some hide/show css on mobile or desktop? But then I'm mindful of keeping the site as simple as possible. 2. Hide green the strip under the bottom gallery on mobile. 3. Increase the size of the nav arrows on both desktop and mobile. Thanks again for any light you can shed on this!

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

Hi All, I'm 80% there on styling my galleries, just need help with the last 20%! I'm using 2 gallery styles; slideshow simple for the top, slideshow reel for the bottom. Everything's perfect on desktop, but I'd like the mobile versions to look exactly the same as the bottom gallery (minus the background strip at the bottom, which i can't seem to get rid of). Also, I'd like to increase the size of the nav arrows on both desktop and mobile. So, full width, with overlayed larger nav buttons on the sides. site: https://www.form-and-function.net/work/circuit-zdy48 password: formandfunction Thanks for any help!

Hi @tuanphan - any ideas about this? Thanks.

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, 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!

Hi Tuanphan - thanks for your help. Website is: www.form-and-function.net Password is: formandfunction

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!