Full-bleed image blocks w/ margin

Site URL: https://desormeaux.squarespace.com

Hey everyone.

Helping a friend get his real estate website off the ground.

I've used custom CSS to get the home page layout he's after: near full-bleed images (with uniform 5px spacing on all sides).

desormeaux.squarespace.com/home (password: realtor)

Problems:

• The code I've applied has adjusted the vertical padding of each section - I only want to impact the spacing around the image blocks.
• On mobile, the page can be panned left/right (as if there's content off the right edge of the page - something with the margins is off)
• The code I've applied has a lot of fat I think could be trimmed to make the page load more efficiently.

Anyone know how to do this right? 😂 

Here's the code I've applied:

<style>
  /*buy sell section*/
section[data-section-id="60e9c627b630645a0efcd2d9"]
{
  margin: 20px;
}
section[data-section-id="60e9c627b630645a0efcd2d9"] .content-wrapper {
  margin: 5px;
    width: 100%;
    max-width: 100%;
  padding: 5px !important;
}
  #block-yui_3_17_2_1_1625934021518_9588.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}
    #block-yui_3_17_2_1_1625934021518_10525.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}
  /*communities section*/
  section[data-section-id="60e9d42db6736875596e18bb"]
{
  margin: 20px;
}
  section[data-section-id="60e9d42db6736875596e18bb"] .content-wrapper {
  margin: 5px;
    width: 100%;
    max-width: 100%;
  padding: 5px !important;
}
  #block-yui_3_17_2_1_1625937885947_14138.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}

    #block-yui_3_17_2_1_1625938476515_5348.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}

      #block-yui_3_17_2_1_1625938476515_7440.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}
  
      #block-yui_3_17_2_1_1625938476515_9589.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}
  
      #block-yui_3_17_2_1_1625938476515_11205.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}
  
      #block-yui_3_17_2_1_1625938476515_12618.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}
  

  </style>

Q1. Can you expplain clearly? include screenshot?

Q2. You solved this?

Q3. You can combine some code

eg. If you want to target 6 image blocks on this section:  Shuswap Communities you can try this code

[data-section-id="60e9d42db6736875596e18bb"] .image-block {
padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}

Do similar for other code

5 hours ago, tuanphan said:

Q1. Can you expplain clearly? include screenshot?

Q2. You solved this?

Q3. You can combine some code

eg. If you want to target 6 image blocks on this section:  Shuswap Communities you can try this code

[data-section-id="60e9d42db6736875596e18bb"] .image-block {
padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}

Do similar for other code

Thank you, @tuanphan.

I tried this approach before, and it didn't work.

Here's the problems:

1. Theres no/minimal padding between the sections. My friend wants normal section padding (he only wants to alter the padding between the image blocks).

2. The spacing around between the image blocks should be 5px.

3. In mobile view, there's a problem with the right margin.

Image uploads aren't working right now, so I recording a short video to explain, instead:

https://www.loom.com/share/393e04760d4c45ab9decb3ab62f91a24

@tuanphan any idea how to solve this?

8 hours ago, XianNewman said:

@tuanphan any idea how to solve this?

I don't see them on homepage. Which page?

Wasn't able to figure it out, so went in a different direction. Thanks anyways!

Do you need to help with these?

Site URL – https://desormeaux.squarespace.com/?password=realtor

1. (Mobile – Homepage) Button Buy with me and Sell with me are not aligned with each other, doesn’t look good.

https://desormeaux.squarespace.com/?password=realtor

2. (Mobile – Footer) Text and button are skewed to the right.

https://desormeaux.squarespace.com/?password=realtor/?password=realtor

3. (Tablet – Homepage) Button Buy with me and Sell with me are not equal, do not look good.

https://desormeaux.squarespace.com/?password=realtor

4. (Tablet – Homepage) Reduce space?

https://desormeaux.squarespace.com/?password=realtor

5. (Tablet – Footer) The word “ux” in “Desormeaux” is cut to the next line.

https://desormeaux.squarespace.com/?password=realtor

6. (Tablet – Sell) Reduce space?

https://desormeaux.squarespace.com/sell/?password=realtor