Jump to content

Blog posts: Title line height, 2 columns for images and shadows for images

Go to solution Solved by Ziggy,

Recommended Posts

Hey!

I am working on styling my blog posts and have a few issues:

  1. I would like to tighten up the line height for the title. Have tried a few codes on the forum but none have work.
  2. I would like to have images display in 2 columns for desktop. In the link you can see I have a before and after image, which i would like to be side by side rather than stacked. For mobile I would like it to remain stacked.
  3. I would like to apply shadows to the images of the solutions, as they are website screenshots. However I don't want it to be applied to the images at the top of the blogpost as they already have shadows in the jpeg.

Website link: https://www.blackandwhiteweb.design/recent-work/cats-whiskers
Password: testing

Thanks in advance!

Link to comment
  • Solution

You can use this to adjust the title line height

.blog-item-wrapper .blog-item-title h1.entry-title {
    line-height: 1em;
}

If you want the images next to each other, then you can drag the images next to each other in the normal way.

Adding shadows to certain images pretty much relies on targeting individual images, you can thy this CSS and extend its usage.

#block-yui_3_17_2_1_1694516179634_14222, #block-yui_3_17_2_1_1694599311244_13682 {
  .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .image-block-wrapper {
    box-shadow: 6px 6px 6px rgba(0,0,0,0.2);
  }
}

 

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

Link to comment
Just now, DillonBradley said:

Thank you so much @Ziggy, this all worked perfectly!

Awesome, pleased to hear it!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

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.