make portfolio fit mobile screen + automatic mouseover / double tap

hi, i'm working on finishing touches on the mobile version of my website.

scarlet-clementine-rsng.squarespace.com

pw: applaus

The frontpage is too long when looking at it on my phone (iPhone through Safari, if that is important). is there a way to shorten the upper section to always fit into the screen, no matter which type oh phone? Also i would like to add a margin under the last item to not make it overlap with the arrow. 

and adding on to this, since it is mouseover, the interaction on mobile is not really intuitive. is there a way to either make the images appear on one tap, and then move onto the project page with a second tap OR make the images appear for a few seconds, one after another while highlighting the title (so like an "automatic mouseover")

any help would be greatly appreciated! 😊

#1. You mean this section?

I don't see arrow in last section. Can you take a screenshot?

#2. You can consider changing to Grid on Mobile only, I can give the code

Hi @thuanphan

there is an animated arrow at the bottom, right where the C from natcon is. 

as for the mobile portfolio, let me try out the code for changing to grid - thank you!

hi @tuanphan

after copying the code in another topic for the change to grid i don't think it's gonna work for me.

Instead i would like to keep it this way, but position the titles vertically in the center or at least a little higher up. this will then solve the problem of the titles hiding underneath the searchbar in mobile browsers. also i would need to push the arrow on the bottom a little upwards to make it visible. could you help me with a code for that? 

concerning the double tap on mobile: in another topic i found a website that uses this method - https://www.brethrendesignco.com/work - which is exactly what i am looking for.  but i can't find the part of the source code that makes this work. is this any help for you?

Use this code to Website Tools (under Not Linked) > Custom CSS

@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
}}

@tuanphan @CorinnaR do we have a solution here for the portfolio titles showing on touch on mobile?