Jump to content

Image Card Customise - CSS required

Recommended Posts

Site URL: https://www.makeyourmarksuper.com.au/story-design

Hi guys,

I'm using Squarespace 7.0, and am building out our companies story.

I'd love to know if the following design that I have attached can be created through CSS code?

Basically, I'd like to have:

- The Image Card text below the image,

- A background colour being the whole image card?

- The image is  to the left of the "image card"?

image.thumb.png.dbf46f595ffed05041c47ac7aa98689b.png

Any ideas?

Link to comment

Hi @TomStapes, if you set the image to Stack and then use this Custom CSS:

#block-yui_3_17_2_1_1663908936907_7671 {
    background:#d7e5f0;
    margin-left:30px !important;
    margin-top:30px !important;
  .sqs-image {
    margin-left:-30px !important;
    margin-top:-30px !important;
  }
}

Change the Block ID at the top if I haven't pulled the correct one from the website, and adjust the margins to suit your design.

Let me know if this is enough info for you to do the rest, good luck!

Probably not relevant, but this type of design is easily achieved without CSS in the new Fluid Engine in Squarespace 7.1.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

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.