Changing section and block background colour and image using CSS (padding also)

Site URL: https://bear-brass-mtkd.squarespace.com/config/settings/site-visibility

Hello!

I am trying to change the background colour and image using CSS.  I am able to target both the footer section and social links block using squarespace ID finder in chrome. However, the socials-link block has some kind of padding that remains unchanged. Anyone has a fix for this? See pictures. I appreciate the help! Thanks!

This is the code I'm using:

section[data-section-id="5febd16447a3783cd163b0fd"], #block-9a52bfa28dd1e9579eea {
  background-color: #e0e8dc;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='40' viewBox='0 0 50 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23abc4a1' fill-opacity='0.4'%3E%3Cpath d='M40 10L36.67 0h-2.11l3.33 10H20l-2.28 6.84L12.11 0H10l6.67 20H10l-2.28 6.84L2.11 10 5.44 0h-2.1L0 10l6.67 20-3.34 10h2.11l2.28-6.84L10 40h20l2.28-6.84L34.56 40h2.1l-3.33-10H40l2.28-6.84L47.89 40H50l-6.67-20L50 0h-2.1l-5.62 16.84L40 10zm1.23 10l-2.28-6.84L34 28h4.56l2.67-8zm-10.67 8l-2-6h-9.12l2 6h9.12zm-12.84-4.84L12.77 38h15.79l2.67-8H20l-2.28-6.84zM18.77 20H30l2.28 6.84L37.23 12H21.44l-2.67 8zm-7.33 2H16l-4.95 14.84L8.77 30l2.67-8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}

3 hours ago, isahua16 said:

Site URL: https://bear-brass-mtkd.squarespace.com/config/settings/site-visibility

Hello!

I am trying to change the background colour and image using CSS.  I am able to target both the footer section and social links block using squarespace ID finder in chrome. However, the socials-link block has some kind of padding that remains unchanged. Anyone has a fix for this? See pictures. I appreciate the help! Thanks!

 

This is the code I'm using:

section[data-section-id="5febd16447a3783cd163b0fd"], #block-9a52bfa28dd1e9579eea {
  background-color: #e0e8dc;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='40' viewBox='0 0 50 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23abc4a1' fill-opacity='0.4'%3E%3Cpath d='M40 10L36.67 0h-2.11l3.33 10H20l-2.28 6.84L12.11 0H10l6.67 20H10l-2.28 6.84L2.11 10 5.44 0h-2.1L0 10l6.67 20-3.34 10h2.11l2.28-6.84L10 40h20l2.28-6.84L34.56 40h2.1l-3.33-10H40l2.28-6.84L47.89 40H50l-6.67-20L50 0h-2.1l-5.62 16.84L40 10zm1.23 10l-2.28-6.84L34 28h4.56l2.67-8zm-10.67 8l-2-6h-9.12l2 6h9.12zm-12.84-4.84L12.77 38h15.79l2.67-8H20l-2.28-6.84zM18.77 20H30l2.28 6.84L37.23 12H21.44l-2.67 8zm-7.33 2H16l-4.95 14.84L8.77 30l2.67-8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}

 

Please send password

Password is isahua2021.

Thanks!

Add to Home > Design > Custom CSS

footer.sections section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
footer.sections .section-background {
    left: 0 !important;
    right: 0 !important;
}

Thanks! I had to tweak it a little bit, but your code allowed me to target footer.sections .section-background easily to change to the color and pattern I wanted! Thanks a lot! 🙂  

2 minutes ago, isahua16 said:

Thanks! I had to tweak it a little bit, but your code allowed me to target footer.sections .section-background easily to change to the color and pattern I wanted! Thanks a lot! 🙂  

I see your navigation has 1 item only. On tablet, it show burger menu. Do you want to convert mobile/tablet burger to desktop menu?