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

Homepage two columns of images as no padding left and right side


Question

Site URL: https://dandelion-garlic-b2w5.squarespace.com

Hi, 

Is there any way CSS that I can make images on both left and right side as full bleed on my home page?

Still keep the space between two images but no margin at the left side of left image and no margin at the right side of right image as full bleed?

Please help me! Thank you.

Website url: https://dandelion-garlic-b2w5.squarespace.com
Password: cvbnm

 

 

Screen Shot 2021-07-01 at 3.01.55 PM.png

Link to comment

6 answers to this question

Recommended Posts

  • 0

Hello,

You should be able to use the following code to get the full-bleed effect. You may need to adjust the top or bottom padding/margins if you want the images or row for it to sit flush with the banner above.

section[data-section-id="60de0bfa33d7aa1e05234f69"]{
.page-section.content-width--wide .content, .page-section.content-width--narrow.content-collection .content, .page-section.content-width--medium.content-collection .content {
  max-width: 100%;
	}
.page-section:not(.full-bleed-section) > .content-wrapper {
  padding: 0 !important;
  max-width: 100%;
	}
}

Hope that this helps!

-Dan

Link to comment
  • 0
On 7/1/2021 at 3:48 PM, Wolfsilon said:

Hello,

You should be able to use the following code to get the full-bleed effect. You may need to adjust the top or bottom padding/margins if you want the images or row for it to sit flush with the banner above.

section[data-section-id="60de0bfa33d7aa1e05234f69"]{
.page-section.content-width--wide .content, .page-section.content-width--narrow.content-collection .content, .page-section.content-width--medium.content-collection .content {
  max-width: 100%;
	}
.page-section:not(.full-bleed-section) > .content-wrapper {
  padding: 0 !important;
  max-width: 100%;
	}
}

Hope that this helps!

-Dan

Hi Dan,

Thanks for your reply.

But this code is not working on my template. 😭

Link to comment
  • 0
Posted (edited)
On 7/1/2021 at 2:05 PM, dlthdus0817 said:

Site URL: https://dandelion-garlic-b2w5.squarespace.com

Hi, 

Is there any way CSS that I can make images on both left and right side as full bleed on my home page?

Still keep the space between two images but no margin at the left side of left image and no margin at the right side of right image as full bleed?

Please help me! Thank you.

Website url: https://dandelion-garlic-b2w5.squarespace.com
Password: cvbnm

 

 

Screen Shot 2021-07-01 at 3.01.55 PM.png

Paste this code in the Custom CSS section:

.page-section[data-section-id="60de0bfa33d7aa1e05234f69"] .content-wrapper {
  max-width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  overflow-x: hidden;
}

 

Edited by NickScola

 

https://www.nickscola.com - Squarespace developer since 2007 now a full service creative agency in Chicago that focuses on creating websites with a high standard for aesthetic excellence.

Link to comment
  • 0
On 7/2/2021 at 2:05 AM, dlthdus0817 said:

Site URL: https://dandelion-garlic-b2w5.squarespace.com

Hi, 

Is there any way CSS that I can make images on both left and right side as full bleed on my home page?

Still keep the space between two images but no margin at the left side of left image and no margin at the right side of right image as full bleed?

Please help me! Thank you.

Website url: https://dandelion-garlic-b2w5.squarespace.com
Password: cvbnm

 

 

Screen Shot 2021-07-01 at 3.01.55 PM.png

Do you need help on this?

Site URL: https://dandelion-garlic-b2w5.squarespace.com/

1. (Mobile – footer) Make instagram icon and text on the same line

dandelion-garlic-b2w5.squarespace.com-02

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
14 hours ago, dlthdus0817 said:

 

Hi Tuanphan.

Yes definitely, I NEED YOUR HELP!

Thank you so much.

Add to Design > Custom CSS

/* Mobile footer text icon same line */
@media screen and (max-width:767px) {
div#page-section-60c23bc99045f975459f3692 {
.span-12 .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div#block-yui_3_17_2_1_1623952657669_7673 p {
    white-space: nowrap !important;
    font-size: 12px;
}
.span-6:first-child {
    width: 20% !important;
}
.span-6:last-child {
    width: 80% !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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...