How can I remove the site margin on a specific section only in squarespace 7.1

Site URL: https://fish-violet-tr2r.squarespace.com/

The issue I am having is that my image is getting cut off by the site margin right now. I could change the site margin, but then all my text would be hugging the edge of the page so I just want to change this one specific sections site margin if that is possible.

Password is "pickandeat123"

On 2/2/2021 at 9:29 AM, tuanphan said:

Add to Design > Custom CSS

[data-section-id="6011fb1b6067742fe1ece0a2"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

 

Thank you so much, this worked beautifully and explained a lot to me about the basic structure of squarespace and how one should be approaching editing the code of the sites. Thank you so much again.

Hi, 

I am trying to remove the margins only on the header. 

I've been trying the code with the specific id of my header but its not working. 

someone can help

https://leonardocampaner.com/selected-work

pass: leonardo

On 4/10/2021 at 12:30 AM, vcampaner said:

Hi, 

I am trying to remove the margins only on the header. 

I've been trying the code with the specific id of my header but its not working. 

someone can help

https://leonardocampaner.com/selected-work

pass: leonardo

 

It looks fine here. Can you explain clearlY?

@tuanphan

I'm having trouble implementing your solution. 

weeco.us

password: evan

The project section has a margin set. I'd like that grid to be full width. I tried implementing the following code:

[data-section-id="636424e1d6480d653c7687c8"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

It didn't have an effect on the site. Has this solution changed with fluid engine or something? Any suggestions would be greatly appreciated. 

On 12/7/2022 at 7:03 AM, EvanMannweiler said:

@tuanphan

 

I'm having trouble implementing your solution. 

 

weeco.us

password: evan

 

The project section has a margin set. I'd like that grid to be full width. I tried implementing the following code:

 

[data-section-id="636424e1d6480d653c7687c8"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

 

It didn't have an effect on the site. Has this solution changed with fluid engine or something? Any suggestions would be greatly appreciated. 

evan

is incorrect password

Hi @tuanphan,

Was this ever solved? 

I am looking to make auto layout list sections across my site have a site margin of 4vw on mobile to match the rest of my site on mobile. 

The section is using Fluid Engine as well.

For my site, I am using a site margin = 4vw.

Everything seems to work well on desktop however when you get to mobile, If you use an auto layout section, it seems to not match the site margin.

I need to make this happen to all auto list sections as I have multiple across my site.

Thanks in advance,

Jon

On 4/20/2023 at 4:34 PM, JonnyIlsley said:

Hi @tuanphan,

Was this ever solved? 

I am looking to make auto layout list sections across my site have a site margin of 4vw on mobile to match the rest of my site on mobile. 

The section is using Fluid Engine as well.

For my site, I am using a site margin = 4vw.

 

Everything seems to work well on desktop however when you get to mobile, If you use an auto layout section, it seems to not match the site margin.

I need to make this happen to all auto list sections as I have multiple across my site.

Thanks in advance,

Jon

If you share link to a page where you use list section, we can check easier

On 4/22/2023 at 3:05 AM, tuanphan said:

If you share link to a page where you use list section, we can check easier

This is the page: 
https://hexahedron-soybean-zdl8.squarespace.com/commercial/summit-house

password: testing123

Its the bit that says Related Projects down the bottom.

On 4/24/2023 at 3:42 PM, JonnyIlsley said:

This is the page: 
https://hexahedron-soybean-zdl8.squarespace.com/commercial/summit-house

password: testing123

Its the bit that says Related Projects down the bottom.

Add to Design > Custom CSS
 

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="643ebedc7cece165a63fe33f"]>div {
    margin-left: 2vw;
    margin-right: 2vw;
}
}

44 minutes ago, tuanphan said:

Add to Design > Custom CSS
 

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="643ebedc7cece165a63fe33f"]>div {
    margin-left: 2vw;
    margin-right: 2vw;
}
}

 

Hi @tuanphan

If I needed this to occur to all my Related Projects sections (there are lots and lots) should I just remove the section ID? 

16 hours ago, JonnyIlsley said:

Hi @tuanphan

If I needed this to occur to all my Related Projects sections (there are lots and lots) should I just remove the section ID? 

 

You can also target all List Sections by using this code

@media screen and (max-width:767px) {
.user-items-list-item-container>div {
    margin-left: 2vw;
    margin-right: 2vw;
}
}

3 hours ago, tuanphan said:

You can also target all List Sections by using this code

@media screen and (max-width:767px) {
.user-items-list-item-container>div {
    margin-left: 2vw;
    margin-right: 2vw;
}
}

 

Ok great, thank you! 

it seemed to work.

Out of interest, is there not a way that you can set the squarespace mobile margin for the whole site? 

8 hours ago, tuanphan said:

You can also target all List Sections by using this code

@media screen and (max-width:767px) {
.user-items-list-item-container>div {
    margin-left: 2vw;
    margin-right: 2vw;
}
}

 

Also, @tuanphan, I just noticed that when I go to a larger screen width on say a large widescreen monitor, all my content sits within the max page width that I have set on Squarespace, however, this related Projects section goes wider than the max page width.

Is there a way to stop this? 

5 minutes ago, JonnyIlsley said:

Also, @tuanphan, I just noticed that when I go to a larger screen width on say a large widescreen monitor, all my content sits within the max page width that I have set on Squarespace, however, this related Projects section goes wider than the max page width.

Is there a way to stop this? 

To stop this I just realised this was set to Full and not Inset. Changing it to Inset, sorted this behaviour.

On 4/26/2023 at 10:38 PM, JonnyIlsley said:

To stop this I just realised this was set to Full and not Inset. Changing it to Inset, sorted this behaviour.

 

So did you solve or still need help?

On 4/29/2023 at 8:14 AM, tuanphan said:

So did you solve or still need help?

Sorry, yeah i d id solve this issue. 

However, do you know if this is possible: 
Out of interest, is there not a way that you can set the squarespace mobile margin for the whole site? 

21 hours ago, JonnyIlsley said:

Sorry, yeah i d id solve this issue. 

 

However, do you know if this is possible: 
Out of interest, is there not a way that you can set the squarespace mobile margin for the whole site? 

Yes. Possible. Do you still need code?

3 hours ago, tuanphan said:

Yes. Possible. Do you still need code?

Yes please, if you have the code that would be great. 

Thanks

Try this CSS

@media screen and (max-width:767px) {
	body .content-wrapper {
	margin-left: 5vw !important;
	margin-right: 5vw !important;
}
}