Jump to content

Padding on Blog posts (mobile view only)

Recommended Posts

  • Replies 24
  • Created
  • Last Reply

Top Posters In This Topic

On 7/5/2021 at 5:28 PM, Georgiaperson said:

m0th3rLode!

Add to Design > Custom CSS

/* Mobile-Space under read more */
@media screen and (max-width:640px) {
article.blog-basic-grid--container.entry.blog-item.is-loaded {
    padding-bottom: 40px;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
20 hours ago, Chlobot said:

@tuanphan Hi Tuan!

How would I do this for an alternating side by side blog? I tried altering the code above but I couldn't figure it out.

Here is the website: https://watermelon-walrus-pmsj.squarespace.com/learn

pw: ilovecrystals

Thank you!!

- Chloe

Hi. Try this

/* Mobile-Space under read more */
@media screen and (max-width:640px) {
div.blog-alternating-side-by-side article {
    padding-bottom: 40px;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...
12 hours ago, autpops said:

Hi @tuanphan! How would you do this for a masonry blog? I also tried tweaking the code, but can't figure it out.

Can you share link to your blog page? We can check its class name easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...
On 10/19/2022 at 9:17 PM, duducampos said:

Hi @tuanphan , hope you're doing great!
And what about the space between images and post title, how can I adjust the padding between these two elements only in mobile? Best!

Can you share link to a blog page?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
On 10/31/2022 at 10:14 PM, Gemma_mineralcreative said:

Hi I'd like to do the same. My site is: https://piccolo-robin-7wh6.squarespace.com/

Additionally, the padding between title and exerpt is different on mobile and I'd like to change. How do I target this code?

Add to Design > Custom CSS

@media screen and (max-width:767px) {
/* space between posts */
article.blog-basic-grid--container.entry.blog-item.is-loaded {
    margin-bottom: 100px;
}
/* title excerpt */
.blog-basic-grid .blog-title {
    margin-bottom: 100px;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

Hi there!

I'd like to make the same changes as Georgiaperson: add more space underneath the Read Me on mobile view only, but I've not been able to make it work using the answers above.

My site is studiojournal.co

FYI: I'm using Masonry and Fluid Engine. 

If anyone could lend a hand, it would be much appreciated!

Amanda

Squarespace screenshot.png

Link to comment
On 1/29/2023 at 6:23 PM, Amanda Gonzalez said:

Hi there!

I'd like to make the same changes as Georgiaperson: add more space underneath the Read Me on mobile view only, but I've not been able to make it work using the answers above.

My site is studiojournal.co

FYI: I'm using Masonry and Fluid Engine. 

If anyone could lend a hand, it would be much appreciated!

Amanda

Squarespace screenshot.png

Hi,

Can you share link to blog page on your site? We can check easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 2/4/2023 at 1:34 PM, Amanda Gonzalez said:

Thanks for responding, tuanphan!

The problem is on the landing page using mobile, so using a mobile browser/viewer, go to https://studiojournal.co, and you'll see my spacing issue there.

I hope this helps!

Thanks again.

Amanda

Because you are using Masonry Layout. Add this to Design > Custom CSS. Change 70px to adjust spacing

/* Blog Masonry to grid mobile */
@media screen and (max-width:767px) {
div#BlogMasonryContainer {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-gap: 70px;
}
div#BlogMasonryContainer>article {
    transform: unset !important;
    width: 100% !important;
    position: relative !important;
}
div#BlogMasonryContainer img {
    height: auto !important;
}
.blog-masonry .image-wrapper {
    height: auto !important;
}}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 2/8/2023 at 8:17 PM, tuanphan said:

Because you are using Masonry Layout. Add this to Design > Custom CSS. Change 70px to adjust spacing

/* Blog Masonry to grid mobile */
@media screen and (max-width:767px) {
div#BlogMasonryContainer {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-gap: 70px;
}
div#BlogMasonryContainer>article {
    transform: unset !important;
    width: 100% !important;
    position: relative !important;
}
div#BlogMasonryContainer img {
    height: auto !important;
}
.blog-masonry .image-wrapper {
    height: auto !important;
}}

 

PERFECT. Thanks so much, tuanphan. It worked a treat!

Link to comment
  • 4 months later...

Hello. I'm using Squarespace 7 and need help with two things on mobile-view ONLY.

1. Increase space above the blog listing (padding or margins)
2. Increase the space between posts to almost double what it is right now.

I'm using the Masonry blog view.

Link to my site:

danishfarhan.com

Thanks a lot in advance!

Edited by Wisam
Forgot a detail
Link to comment
5 hours ago, Wisam said:

Hello. I'm using Squarespace 7 and need help with two things on mobile-view ONLY.

1. Increase space above the blog listing (padding or margins)
2. Increase the space between posts to almost double what it is right now.

I'm using the Masonry blog view.

Link to my site:

danishfarhan.com

Thanks a lot in advance!

These padding?

image.thumb.png.5991f191b3431be006f52e904c09fed7.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

Hi @tuanphan 

I have a similar question about padding issues on the blog post list.

The current padding between posts is even, so it is confusing to know the relation between the titles and thumbnails. How can I make the upper padding smaller, and the lower padding bigger, as the attached reference picture? 

https://ris-proto.squarespace.com/config/

 

Edited by Kellyx10
client's privacy
Link to comment
On 8/19/2023 at 2:02 PM, Kellyx10 said:

Hi @tuanphan 

I have a similar question about padding issues on the blog post list.

The current padding between posts is even, so it is confusing to know the relation between the titles and thumbnails. How can I make the upper padding smaller, and the lower padding bigger, as the attached reference picture? 

https://ris-proto.squarespace.com/config/

S__83197981.jpg

Which page are you referring to?

https://ris-proto.squarespace.com/?noredirect

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/21/2023 at 7:57 PM, Kellyx10 said:

@tuanphan


Here it is.

https://ris-proto.squarespace.com/works

How can I make the upper padding smaller, and the lower padding bigger, in the mobile view? Thanks!

Add to Website > Website Tools > Custom CSS

/* Works - Mobile - Space */
@media screen and (max-width:767px) {
/* top space default is 5vw */
.blog-article-spacer {
    height: 2vw !important;
}
/* bottom space default is 30px */
.blog-basic-grid .blog-basic-grid--container.is-loaded {
    margin-bottom: 50px;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.