Image card customisation css

Site URL: https://the-dead-rabbit.squarespace.com/

Hello everyone,

I'm trying to create a custom menu layout using squarespace, but I'm not sure how to achieve the desired look. I want to create a similar interface to the likes of deliveroo/seamless, and wondered if anyone could help with this? I'll attach the layout wireframe I've designed of what I'm looking for. I had considered customising the image card to display the content this way, but I also need to have a tab function at the top to go between "starters", "desserts" etc, much like squarespace's in-built menu block. 

Can anyone help? Thanks!

2 hours ago, prcreative said:

Site URL: https://the-dead-rabbit.squarespace.com/

Hello everyone,

 

I'm trying to create a custom menu layout using squarespace, but I'm not sure how to achieve the desired look. I want to create a similar interface to the likes of deliveroo/seamless, and wondered if anyone could help with this? I'll attach the layout wireframe I've designed of what I'm looking for. I had considered customising the image card to display the content this way, but I also need to have a tab function at the top to go between "starters", "desserts" etc, much like squarespace's in-built menu block. 

 

Can anyone help? Thanks!

Can you describe about 3 buttons on the top, what happen if we click on them?

1 minute ago, bangank36 said:

Can you describe about 3 buttons on the top, what happen if we click on them?

Yes! They would be section tabs, so when clicking on one of them, you would see another part of the menu. I think I've found a plugin to achieve this: https://www.will-myers.com/articles/adding-simple-tabs-to-your-website-in-squarespace-71-and-70

@bangank36 let me know if you could help with the image card css styling to achieve this, thanks!

Have you tried using the image block with this design?

33 minutes ago, bangank36 said:

Have you tried using the image block with this design?

Hi yes, this is exactly what I've used. I need to make it smaller in size on desktop and stop it from stacking on mobile. Any ideas?

9 hours ago, prcreative said:

Hi yes, this is exactly what I've used. I need to make it smaller in size on desktop and stop it from stacking on mobile. Any ideas?

 

 

Your site is private now. Can you share it with a protected password so we can take a look?

9 hours ago, bangank36 said:

Your site is private now. Can you share it with a protected password so we can take a look?

No problem! Password is hello123

On 3/24/2022 at 5:19 PM, prcreative said:

No problem! Password is hello123

Hi. Which page are you referring to? We don't see it on homepage

https://the-dead-rabbit.squarespace.com/