Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Full-bleed image blocks w/ margin


XianNewman

Question

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>

 

8a. Side by side - Horizontal With Google Cloud (Squarespace Circle Profile).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to comment
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 0

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
Posted (edited)
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

Screen Shot 2021-07-11 at 07.54.31.png

Screen Shot 2021-07-11 at 07.55.00.png

 

Edited by XianNewman

8a. Side by side - Horizontal With Google Cloud (Squarespace Circle Profile).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to comment
  • 0
8 hours ago, XianNewman said:

@tuanphan any idea how to solve this?

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

desormeaux.squarespace.com-01-min.png

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

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

desormeaux.squarespace.com-02-min.png

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

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

desormeaux.squarespace.com-03-min.png

4. (Tablet – Homepage) Reduce space?

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

desormeaux.squarespace.com-04-min.png

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

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

desormeaux.squarespace.com-05-min.png

6. (Tablet – Sell) Reduce space?

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

desormeaux.squarespace.com-06-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...