Jump to content

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

Recommended Posts

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

image.thumb.png.7b85c359d7b9785baa1de1aa27269fb2.png 

 

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

Edited by FYU
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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. 

image.thumb.png.b162414694e6e4ca4d623a1ad6595a99.png

 

Thank you!!

Link to comment
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. 

image.thumb.png.b162414694e6e4ca4d623a1ad6595a99.png

 

Thank you!!

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.