abc Posted August 4, 2022 Share Posted August 4, 2022 (edited) 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. Edited August 4, 2022 by pro Link to comment
Beyondspace Posted August 5, 2022 Share Posted August 5, 2022 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. On my end, it looks fine without padding Do you still need help? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
abc Posted August 5, 2022 Author Share Posted August 5, 2022 2 hours ago, bangank36 said: On my end, it looks fine without padding. Do you still need help? Yes, the issue is still there. Please make sure your screen width is less than 1750px. You will see the black padding. Link to comment
sfphotogirl Posted August 6, 2022 Share Posted August 6, 2022 (edited) 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. Edited August 6, 2022 by sfphotogirl adding info Link to comment
Beyondspace Posted August 6, 2022 Share Posted August 6, 2022 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. I try section[data-section-id="62ec2c21eefb7961298f10ca"] .section-background { background-color: transparent !important; } Hope it can help BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
sfphotogirl Posted August 7, 2022 Share Posted August 7, 2022 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) Link to comment
tuanphan Posted August 10, 2022 Share Posted August 10, 2022 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) You mean this padding? 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
sfphotogirl Posted August 10, 2022 Share Posted August 10, 2022 5 hours ago, tuanphan said: You mean this padding? Yes, that is the padding! In non-FE 7.1 I can remove that padding with code, but it doesn't work with FE. Link to comment
tuanphan Posted August 11, 2022 Share Posted August 11, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
abc Posted August 11, 2022 Author Share Posted August 11, 2022 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
sfphotogirl Posted August 11, 2022 Share Posted August 11, 2022 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? Link to comment
Solution tuanphan Posted August 14, 2022 Solution Share Posted August 14, 2022 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? 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
sfphotogirl Posted August 16, 2022 Share Posted August 16, 2022 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
abc Posted August 17, 2022 Author Share Posted August 17, 2022 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; } Thank you @tuanphan. Worked for me. Link to comment
willzj Posted October 21, 2022 Share Posted October 21, 2022 (edited) 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 Edited October 21, 2022 by willzj Link to comment
tuanphan Posted October 23, 2022 Share Posted October 23, 2022 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 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment