Jump to content

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

Recommended Posts

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

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
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
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.