Jump to content

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

By DillonBradley, in Customize with code

Go to solution Solved by Ziggy,

Recommended Posts

DillonBradley Level 4

DillonBradley

Posted
Posted

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
  • Replies 3
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Ziggy
Ziggy

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 ima

DillonBradley
DillonBradley

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

  • Solution
Ziggy Level 14

Ziggy

Posted
  • Solution
Posted

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) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Link to comment
Ziggy Level 14

Ziggy

Posted
Posted
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) 
 🖼️ Pinch-to-Zoom Gallery Lightbox 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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources