Jump to content

[Fluid Engine] How do I get rid of this bottom padding on Instagram block?

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

17 hours ago, pro said:

Site URL: https://steven.squarespace.com/test

I don't understand why it's there. I double-checked the section setup and made sure that the block fills up the section completely edge to edge and top to bottom, but that pesky bottom padding still persists. Any help would be greatly appreciated. Thanks.

756388606_Screenshot2022-08-04at16_52_45.png.ca6093856527d764b58693cbf2dc9979.png

On my end, it looks fine without padding

image.thumb.png.dae9af88e8455f26f09ee3dac1f0632b.png

Do you still need help?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
6 hours ago, pro said:

Yes, the issue is still there. Please make sure your screen width is less than 1750px. You will see the black padding.

I see the padding. I'm having a similar issue with my fluid engine test site, except the padding is both top and bottom. Note that the white bars you see on the sides of the images come from IG and are not Sqsp padding. The problems are only thin strips at top and bottom.

 

Screen Shot 2022-08-05 at 5.04.19 PM.png

Edited by sfphotogirl
adding info
Link to comment
1 hour ago, sfphotogirl said:

I see the padding. I'm having a similar issue with my fluid engine test site, except the padding is both top and bottom. Note that the white bars you see on the sides of the images come from IG and are not Sqsp padding. The problems are only thin strips at top and bottom.

 

Screen Shot 2022-08-05 at 5.04.19 PM.png

I try

section[data-section-id="62ec2c21eefb7961298f10ca"] .section-background {
  background-color: transparent !important;
}

Hope it can help

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
23 hours ago, bangank36 said:

I try

section[data-section-id="62ec2c21eefb7961298f10ca"] .section-background {
  background-color: transparent !important;
}

Hope it can help

@bangank36 Thanks for your help, but it didn't change anything for my test site (the background for that section was already white). You can see it especially on slightly smaller screens, like this:

My test site is here, if you want to take a look: https://alligator-chimes-ysk2.squarespace.com/  (password: tester)

 

Screen Shot 2022-08-06 at 5.20.05 PM.png

Link to comment
On 8/7/2022 at 7:23 AM, sfphotogirl said:

Thanks for your help, but it didn't change anything for my test site (the background for that section was already white). You can see it especially on slightly smaller screens, like this:

My test site is here, if you want to take a look: https://alligator-chimes-ysk2.squarespace.com/  (password: tester)

 

Screen Shot 2022-08-06 at 5.20.05 PM.png

You mean this padding?

image.thumb.png.9b228162843e18d3947febee9b06893e.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
14 hours ago, sfphotogirl said:

Yes, that is the padding! In non-FE 7.1 I can remove that padding with code, but it doesn't work with FE.

Use this CSS

.fe-62d9a23d2d38e30dabb7944c {
    grid-template-rows: repeat(8,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), 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
5 hours ago, tuanphan said:

Use this CSS

.fe-62d9a23d2d38e30dabb7944c {
    grid-template-rows: repeat(8,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

 

 

Hi Tuan, do you have a code for my issue as well by any chance?

Link to comment
10 hours ago, tuanphan said:

Use this CSS

.fe-62d9a23d2d38e30dabb7944c {
    grid-template-rows: repeat(8,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

 

Thank you! I tried it on my test site. It worked on large screen, but the padding still shows on small screens, unfortunately.

Question: Is the class that starts with ".fe-62d..." what we should use to target sections now, instead of a section ID?

 

Screen Shot 2022-08-11 at 12.38.27 PM.png

Link to comment
  • Solution
On 8/11/2022 at 9:19 PM, pro said:

 

Hi Tuan, do you have a code for my issue as well by any chance?

Use this code

.fe-62ec2c2152cc267891c068a5 {
    grid-template-rows: repeat(5,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

 

On 8/12/2022 at 2:40 AM, sfphotogirl said:

Thank you! I tried it on my test site. It worked on large screen, but the padding still shows on small screens, unfortunately.

Question: Is the class that starts with ".fe-62d..." what we should use to target sections now, instead of a section ID?

 

Screen Shot 2022-08-11 at 12.38.27 PM.png

You can try this new code

.fe-62d9a23d2d38e30dabb7944c {
    grid-template-rows: repeat(8,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}
@media screen and (max-width:1000px) {
.fe-62d9a23d2d38e30dabb7944c {
    grid-template-rows: repeat(6,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}
}

Second code will run for screen under 1000px

(I adjust number 8 to number 6, means reduce 8 rows to 6 rows)

If it still doesn't work, you can adjust 1000px & number 6

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/13/2022 at 7:28 PM, tuanphan said:

Use this code

.fe-62ec2c2152cc267891c068a5 {
    grid-template-rows: repeat(5,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

 

You can try this new code

.fe-62d9a23d2d38e30dabb7944c {
    grid-template-rows: repeat(8,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}
@media screen and (max-width:1000px) {
.fe-62d9a23d2d38e30dabb7944c {
    grid-template-rows: repeat(6,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}
}

Second code will run for screen under 1000px

(I adjust number 8 to number 6, means reduce 8 rows to 6 rows)

If it still doesn't work, you can adjust 1000px & number 6

Thank you, @tuanphan! This is the code that worked for me. I had to adjust the media query for any screen under 1600px, and then it worked. This is the code I used:

.fe-62d9a23d2d38e30dabb7944c {
    grid-template-rows: repeat(8,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}
@media screen and (max-width:1600px) {
.fe-62d9a23d2d38e30dabb7944c {
    grid-template-rows: repeat(6,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}
}

Note that I used separate code to hide the whole section on mobile, so you will see that on the test site.

Link to comment
  • 2 months later...
On 8/13/2022 at 10:28 PM, tuanphan said:

Use this code

.fe-62ec2c2152cc267891c068a5 {
    grid-template-rows: repeat(5,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

 

You can try this new code

.fe-62d9a23d2d38e30dabb7944c {
    grid-template-rows: repeat(8,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}
@media screen and (max-width:1000px) {
.fe-62d9a23d2d38e30dabb7944c {
    grid-template-rows: repeat(6,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}
}

Second code will run for screen under 1000px

(I adjust number 8 to number 6, means reduce 8 rows to 6 rows)

If it still doesn't work, you can adjust 1000px & number 6

So this code here removes the top padding completely. I am wondering if I want there still to be a little space between sections, say 2vmax, how would I do this? It seems like with the new fluid engine, changing the margin or padding directly in css no longer works. @tuanphan

space between sections.PNG

Edited by willzj
Link to comment
On 10/21/2022 at 10:55 AM, willzj said:

So this code here removes the top padding completely. I am wondering if I want there still to be a little space between sections, say 2vmax, how would I do this? It seems like with the new fluid engine, changing the margin or padding directly in css no longer works. @tuanphan

space between sections.PNG

You can change number 5 in the code to 6, 7...

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.