Jump to content

Image card customisation css

Recommended Posts

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!

Screenshot 2022-03-16 at 15.40.30.png

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

Screenshot 2022-03-16 at 15.40.30.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Have you tried using the image block with this design?

image.thumb.png.9dccdc9473831c2b03af9c7287b6bcc5.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

 

 

Screenshot 2022-03-23 at 15.47.57.png

Screenshot 2022-03-23 at 15.49.02.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.