Jump to content

make portfolio fit mobile screen + automatic mouseover / double tap

Recommended Posts

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


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

Link to comment
  • Replies 5
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

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?

Link to comment

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


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.