Jump to content

Reduce horizontal padding on blog posts

Recommended Posts

Site URL: https://lizard-lily-axxj.squarespace.com/gallery

Working with a page with a narrow design, I find there is just to much padding on 7.1. Know how to reduce this vertically and in sections, but can't find the option on blog posts.

First: Too much padding between the menu and the photo. 

Then too much padding both between categories and text (blog content) and categories and the footer / next blog post arrow.

How to reduce this?

Ps: I have a css removing the title and moving the metadata below the blog content.

https://lizard-lily-axxj.squarespace.com/gallery (please open a blog post) - password: heggholmenfyr

Skjermbilde 2021-02-02 kl. 12.47.30.png

Skjermbilde 2021-02-02 kl. 12.47.36.png

Link to comment
  • Replies 15
  • Views 2.8k
  • Created
  • Last Reply

Top Posters In This Topic

23 hours ago, tuanphan said:

Add to Design > Custom CSS



.blog-basic-grid.collection-content-wrapper {
    padding-top: 10px;
}

 

Sorry, but this did nothing. Maybe because I have the other code??

https://lizard-lily-axxj.squarespace.com/gallery/thekingsoaks - here is direct link to where I want the changes to be - password: heggholmenfyr

This is the code that is already there to remove title and move metadata to beneath the content

.blog-item-wrapper .blog-item-inner-wrapper {
    display: flex;
    flex-direction: column;
}
/* title */
.blog-item-top-wrapper {
    order: 2;
}
/* image */
.blog-item-content-wrapper {
    order: 1;
  padding-top: 10px;
}

article .entry-title {
    display: none;}

 

Link to comment
  • 1 year later...
On 7/23/2022 at 6:19 PM, aly0209 said:

Hi. Config is admin url.

You can access Pages > Then hover on Shop Page on Main Navigation or Not Linked > Click Gear icon > Look at URL Slug.

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 7/28/2022 at 6:20 PM, aly0209 said:

Hi , URL slug is - all-new-in-1 

 

I am super new to all this site building and so mot quite sure if the info. I am sending are the ones you need. All I want is to reduce the padding between Main Menu and the Categories. 

 

Your site is private. Can you setup an access password?

https://halibut-sunflower-lclg.squarespace.com/all-new-in-1?noredirect

image.thumb.png.8eaf84237e52fe6aeef3e63debb97c7c.png

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
  • 1 year later...

Hi,

I'm really struggling with the images inside blog posts. 

1. I would like them to be a bit smaller than the default squarespace size (they are huge!) and this works but only in the desktop view, they are tiny on the phone:(

.sqs-block-image
{
transform:scale(.8);
}

2. I would also like to reduce the padding between the text and the images but I noticed that the code below works only without the one adjusting the size of the images 😔

.collection-type-blog.view-item .image-block {
    padding-bottom: 0;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0;
}

Is there any way to have it all?;)

Many thanks

https://patasyladridos.com/blog/blog-post-title-one-lzglc

Edited by Yenna
Link to comment
On 4/24/2024 at 12:21 AM, Yenna said:

Hi,

I'm really struggling with the images inside blog posts. 

1. I would like them to be a bit smaller than the default squarespace size (they are huge!) and this works but only in the desktop view, they are tiny on the phone:(

.sqs-block-image
{
transform:scale(.8);
}

2. I would also like to reduce the padding between the text and the images but I noticed that the code below works only without the one adjusting the size of the images 😔

.collection-type-blog.view-item .image-block {
    padding-bottom: 0;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0;
}

Is there any way to have it all?;)

Many thanks

https://patasyladridos.com/blog/blog-post-title-one-lzglc

#1. The url doesn't work. But if you want the code run on desktop only, you can change code to this

@media screen and (min-width:992px) {
.sqs-block-image
{
transform:scale(.8);
}
}

#2. The url doesn't work.

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.