Jump to content

Adding Padding to Blog Collection Page

Recommended Posts

Site URL: http://www.simpledwelling.net

Hi everyone,

 

I'm looking to spruce up my website, and wanting to add some padding to the left of my Blog collection page, similar to what https://softervolumes.com/ has done to their 'Latest' section.

 

I don't want to the padding to be site wide, nor apply to actual blog posts, just the desktop version of the Blog collection page. Can anyone help with some code?

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

On 9/12/2022 at 1:46 PM, anthonyrichardson said:

Site URL: http://www.simpledwelling.net

Hi everyone,

 

I'm looking to spruce up my website, and wanting to add some padding to the left of my Blog collection page, similar to what https://softervolumes.com/ has done to their 'Latest' section.

 

I don't want to the padding to be site wide, nor apply to actual blog posts, just the desktop version of the Blog collection page. Can anyone help with some code?

With the padding on the left, which element on your site will be set sticky?

What is your current version of squarespace

Edited by bangank36

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
  • 3 weeks later...

Do you mean adding a title on the left and the remaining content is on the right on the blog Collection page?

image.thumb.png.342ecfb2f4c1abe4235b480d5f574901.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
  • 3 months later...
On 9/12/2022 at 4:46 PM, anthonyrichardson said:

Site URL: http://www.simpledwelling.net

Hi everyone,

 

I'm looking to spruce up my website, and wanting to add some padding to the left of my Blog collection page, similar to what https://softervolumes.com/ has done to their 'Latest' section.

 

I don't want to the padding to be site wide, nor apply to actual blog posts, just the desktop version of the Blog collection page. Can anyone help with some code?

Wanting to bump this call for help with coding in some padding to only the Blog collection page on my website. While the example has padding on the left, I'd want to add sizeable padding to the right side of my page.

I don't necessarily need the 'sticky element' to site next to the collection anymore.

Screen Shot 2023-01-30 at 7.38.59 am.png

Link to comment
On 1/30/2023 at 3:42 AM, anthonyrichardson said:

Wanting to bump this call for help with coding in some padding to only the Blog collection page on my website. While the example has padding on the left, I'd want to add sizeable padding to the right side of my page.

I don't necessarily need the 'sticky element' to site next to the collection anymore.

Screen Shot 2023-01-30 at 7.38.59 am.png

Hi,

It looks like you changed layout. Do you still need help to add padding on this page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/4/2023 at 4:50 AM, anthonyrichardson said:

Hi Tuanphan,

 

Yes please, still looking to add padding to the right-side of the blog collections page.

Add to Design > Custom CSS > then save & reload the site

@media screen and (min-width:768px) {
.blog-masonry.collection-content-wrapper {
    padding-right: 10vw !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.