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

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


Recommended Posts

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 

image-1.jpg

Link to comment

This snippet will apply on all image grid site-wide

image.thumb.png.478e87886fb5feedccde3249aa512c10.png

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

Or you can only need apply on home page only

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

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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;
}

image.thumb.png.d60c84cf6d8acbb48944ec21cbab2bb4.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

image.thumb.png.6a01aa05fb9ae2a005ccf736636f921e.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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*/
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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;
}

 

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

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

Link to comment

try edit code to

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

 

 

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

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

Edited by scholarsayze
missing text
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...