How to change project display on homepage from links to grid for mobile (Hawley Template)

Site URL: https://fongyu.co

Hello wonderful and capable forum gurus,

I'm a Squarespace newbie and I have a question about the Hawley template.

https://hawley-demo.squarespace.com/

I'm building my folio site using this template and can't figure out how to customise the mobile version.
The project display settings are for both desktop and mobile. I can't find a way to make them display differently.

I like the desktop version where the project thumbnails appear when the mouse hovers over the list.
However this doesn't work well in the mobile site.

I would like to try 2 solutions to make the mobile site look nicer:
1. Change the homepage display to "Grid" - either simple, or overlay
2. Reduce the link spacing by half, it looks too spread out at the moment

Any other solutions are welcome too.

Just checked I don't seem to be able to change the template so will have to make this template work. 

Please help 🙏

Thanks 

Fong

Hi,

Q2. Add this to Design > Custom CSS

/* reduce portfolio items padding */
@media screen and (max-width:767px) {
h1.portfolio-hover-item-title {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
}

Thanks so much it worked!!

Now is it possible to reduce the project section height in mobile?

You see how the portfolio list height is too tall and bit unnecessary - I'm trying to bring the whole section up a bit. 

Thank you!!

On 1/21/2021 at 12:01 PM, FYU said:

Thanks so much it worked!!

 

Now is it possible to reduce the project section height in mobile?

You see how the portfolio list height is too tall and bit unnecessary - I'm trying to bring the whole section up a bit. 

 

Thank you!!

It looks like you solved by moving title under image on mobile?