How can I remove padding around images to achieve a specific image layout?

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home-v11

Hello, I'm trying to arrange a layout in Squarespace as attached with 7 total images.

I'd like all the images to be close together (no padding) and right to the edge of the screen full width.

I've tried to start the layout here in section 2 of my site: https://bluebird-porcupine-yzdg.squarespace.com/home-v11 pword = bluebird

I've noticed that my images have some default padding so there are gaps between them. I also can't figure how to get the images right up to the edges of the screen as per my attached example.

Is this layout possible? Please help.

Best,

Faizal 

This snippet will apply on all image grid site-wide

.sqs-block-image {
  padding: 0 !important;
}

Or you can only need apply on home page only

#collection-5ee237be059f9951fe95bf2c .sqs-block-image {
  padding: 0 !important;
}

Awesome! Thank you so much bangank36.

How can I remove the left and right padding so the images go to the edge of the screen?

Best,

Faizal

1 hour ago, scholarsayze said:

Awesome! Thank you so much bangank36.

How can I remove the left and right padding so the images go to the edge of the screen?

Best,

Faizal

Kindly check this snippet

section[data-section-id="5ee902680f1cf9687c177bee"] {
  width: 100vw;
}
section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper {
  margin: 0;
    width: 100%;
    max-width: 100%;
  padding: 0 !important;
}
section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .content {
  width: 100% !important;
}
section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .sqs-block-image {
 padding: 0;
}
section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .sqs-block-image img {
  width: auto !important;
  height: 100% !important;
}

Hey bangank36, many thanks so I added this code and it works perfectly!!

I tried to add the additional images for this section to complete the total of 7 images (as my original attachment), but I still seem to have some gaps?

Please kindly check: https://bluebird-porcupine-yzdg.squarespace.com/home-v11 pword = bluebird

Many thanks,

Best,

Faizal

12 minutes ago, scholarsayze said:

Hey bangank36, many thanks so I added this code and it works perfectly!!

I tried to add the additional images for this section to complete the total of 7 images (as my original attachment), but I still seem to have some gaps?

Please kindly check: https://bluebird-porcupine-yzdg.squarespace.com/home-v11 pword = bluebird

Many thanks,

Best,

Faizal

Did you added the custom css I provided?

Also the first 3 images is not the same size with the ones below, should be 500x500 dimension

Thanks, yes I did add the full code as attached.

Sorry, I have changed the images now, I didn't realise they had to be that size.

I still seem to have a gap with the middle image top and bottom. Does this image need to be a specific size dimension also?

Many thanks!

Is there a away to allow this code to only affect the desktop view, and NOT on mobile?

Many thanks.

Best,

Faizal

5 minutes ago, scholarsayze said:

Is there a away to allow this code to only affect the desktop view, and NOT on mobile?

Many thanks.

Best,

Faizal

Put the code I sent into this snippet

@media screen and (min-width: 600px) {
  /*Copy them here*/
}

Wow! Thanks so much, that's so cool!

Please can you double check my code, I have added your code but I still get a gap between the middle long image top and bottom?? Maybe I have done something wrong?

Many thanks!

On 6/19/2020 at 6:54 PM, scholarsayze said:

Wow! Thanks so much, that's so cool!

Please can you double check my code, I have added your code but I still get a gap between the middle long image top and bottom?? Maybe I have done something wrong?

Many thanks!

Try adding to Home > Design > Custom CSS

body#collection-5ee237be059f9951fe95bf2c .image-block {
    padding: 0 !important;
}

Thanks very much tuanphan that fixed that!!!

Please can you double check my code, I have added the above code.....

section[data-section-id="5ee902680f1cf9687c177bee"] {
  width: 100vw;
}
section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper {
  margin: 0;
    width: 100%;
    max-width: 100%;
  padding: 0 !important;
}
section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .content {
  width: 100% !important;
}
section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .sqs-block-image {
 padding: 0;
}
section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .sqs-block-image img {
  width: auto !important;
  height: 100% !important;
}

....plus your code...

body#collection-5ee237be059f9951fe95bf2c .image-block {
    padding: 0 !important;
}

....but I notice on my mobile, the images with no left/right padding adds a strange left + right movement on my mobile as shown here:

Can this be stopped please as it looks like the page does not stay in the middle creating more space either side.

Please advise.

Many thanks!

Best,

Faizal

try edit code to

@media screen and (min-width:768px) {
body#collection-5ee237be059f9951fe95bf2c .image-block {
    padding: 0 !important;
}
}

Thanks, I tried the code but I still get the same issue on mobile??

Is there another solution? I think it's the larger section of code:

section[data-section-id="5ee902680f1cf9687c177bee"] {
  width: 100vw;
}
section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper {
  margin: 0;
    width: 100%;
    max-width: 100%;
  padding: 0 !important;
}
section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .content {
  width: 100% !important;
}
section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .sqs-block-image {
 padding: 0;
}
section[data-section-id="5ee902680f1cf9687c177bee"] .content-wrapper .sqs-block-image img {
  width: auto !important;
  height: 100% !important;
}

If I remove this completely it's totally fine, but I still have the left + right gaps on either side of the images.

Is there another way to remove the left + right gaps?

Many thanks,

Best,

Faizal

I've trying to adjust the code above so that the image in the hero section of my site is flush to the right of the screen like the top image on this site: https://bluebird-porcupine-yzdg.squarespace.com/home

However I haven't been successful in getting it to work.

Any suggestions?

My site: https://leadwithgather.squarespace.com/

Pass: L3@dw1th

Thanks in advance!

8 hours ago, raquelwilson said:

I've trying to adjust the code above so that the image in the hero section of my site is flush to the right of the screen like the top image on this site: https://bluebird-porcupine-yzdg.squarespace.com/home

However I haven't been successful in getting it to work.

Any suggestions?

My site: https://leadwithgather.squarespace.com/

Pass: L3@dw1th

Thanks in advance!

You mean this image?

Sorry I should have included a screen shot to make it easier. No I actually mean the image at the top of the screen. This one:

I found something on the @ghost_plugins website, that sort of gives me what I want:

https://www.ghostplugins.com/steps/full-width-image-card-71-version

I'd really like the image larger, but I can live with this.

Thanks for your response @tuanphan!

Hi @raquelwilson

I actually used the following code on our Scholar & Sayze site as here:

[data-section-id="6034c2b9d8e50b04d5651ea4"] {
 .section-background {
    top: 5vw!important;
    right: 0vw!important;
    bottom: 3vw!important;
    left: 21vw!important;
  }
}

Of course you will just need to replace the id code with your data section id and play around with the positioning settings.

Hope that helps!