How can I make an image as a full bleed card block in 7.1

Site URL: https://parakeet-sunflower-kg3z.squarespace.com

Hi I was just wondering if anyone could help with an issue I am having with a client website I am designing.

I built the site in 7.1 but it is missing a feature I really wanted to use. I would like to add in a full bleed image contained in a card block (or an alternative). Essentially I want it to look like a squared up image sat next to a square block of colour with text over the top of the colour block. See example https://www.onlyanother.co/home. This was possible in 7.0, but for the life of me I can not figure out how to get it to work in 7.1. Any suggestions would be greatly appreciated? 

Thanks

You mean left image - right text?

Step 1. Add a section > Add a background image

Step 2. Add 2 columns: Left is Spacer Block - Right is Text Block

Step 3. We will give the code to achieve example layout

Thank you Tuanphan for your response. I hope we can get this to work. It has been driving me nuts. 🤞

I have the same issue: How can I set the image on the left to bleed off top, left and bottom of this section? Thank you!

On 1/22/2021 at 1:04 AM, dalewis123 said:

I have the same issue: How can I set the image on the left to bleed off top, left and bottom of this section? Thank you!

Can you share link to page in screenshot? We can check easier

8 hours ago, tuanphan said:

Can you share link to page in screenshot? We can check easier

Thank you, T. https://cymbals-chartreuse-k3cr.squarespace.com/config/pages?p

My objective is to have a simple, modular grid layout where sections can be full width or split in half (see attached).  And you can place either text, image or video content in any area. Can this be done?

5 hours ago, dalewis123 said:

Thank you, T. https://cymbals-chartreuse-k3cr.squarespace.com/config/pages?p

My objective is to have a simple, modular grid layout where sections can be full width or split in half (see attached).  And you can place either text, image or video content in any area. Can this be done?

Step 1. Add a section

Step 2. Edit section > Add a video background

Step 3. Add 2 columns. Left is Text/Button - Right is Spacer

Step 4. Let me know. We will check code to create split section

15 hours ago, tuanphan said:

Step 1. Add a section

Step 2. Edit section > Add a video background

Step 3. Add 2 columns. Left is Text/Button - Right is Spacer

Step 4. Let me know. We will check code to create split section

Thank you, T.

This is done. There are 2 sections:
- Section 6- want image on left (bleeds off left, top & bottom), text on right
- Section 7- want text on left, video on right

On 1/24/2021 at 2:15 PM, dalewis123 said:

Thank you, T.

This is done. There are 2 sections:
- Section 6- want image on left (bleeds off left, top & bottom), text on right
- Section 7- want text on left, video on right

Hi T, just letting you know some sections moved around.

See attached:

- Top section (Digital)- want image on left (bleeds off left, top & bottom), text on right
- Bottom section (Video)- want text on left, video on right

On 1/26/2021 at 3:37 PM, dalewis123 said:

Hi T, just letting you know some sections moved around.

See attached:

- Top section (Digital)- want image on left (bleeds off left, top & bottom), text on right
- Bottom section (Video)- want text on left, video on right

You can disregard, this has been solved. Thank you.

@tuanphan I saw you helped others with their images. Please see above.  is there any chance you can help me with mine? 

I've now added a section to the page that has: 

• background image 
• 2 columns, one with text and one with a spacer 

Are you able to provide the necessary code? 

https://originaqua-pools.squarespace.com/learn

pw: cleanwater

Thanks in advance 🙂

Mary 

On 3/22/2021 at 7:59 AM, OriginA said:

@tuanphan I saw you helped others with their images. Please see above.  is there any chance you can help me with mine? 

I've now added a section to the page that has: 

• background image 
• 2 columns, one with text and one with a spacer 

Are you able to provide the necessary code? 

 

https://originaqua-pools.squarespace.com/learn

pw: cleanwater

Thanks in advance 🙂

 

 

Mary 

 

Hi. I don't see this image/text. Do you still need help?

On 7/9/2021 at 7:41 PM, jrebdesign said:

@tuanphan Any chance you can help me with mine as well?

I've added a section to the page that has: 

• background image 
• 2 columns, one with space on the left and one with a text on the right 

Are you able to provide the necessary code? 

https://easling-construction.squarespace.com/gallery/custom-home-modern-lake-house

 

pw: easling

Thanks in advance!!

 

 

The url doesn't exist. Can you check it again?

On 7/12/2021 at 6:33 PM, jrebdesign said:

@tuanphan

Sorry about that!

https://easling-construction.squarespace.com/gallery/custom-home-1

pw: easling

 

Thank you!

It looks like you solved this?

On 7/16/2021 at 1:46 AM, jrebdesign said:

@tuanphan - no I just created a graphic as a place holder. Still need some assitance please.

 

 

 

You can add Image Block on left, Text Block on right, then I will check & give the code

On 7/20/2021 at 7:03 PM, jrebdesign said:

 

@tuanphan

 

https://easling-construction.squarespace.com/gallery/custom-home-1

pw: easling

Add to Design > Custom CSS

[data-section-id="60f6babb9b22fd57af293414"] .content-wrapper {
    padding: 0 !important;
    max-width: 100% !important;
}
html, body {overflow-x: hidden;}

18 hours ago, jrebdesign said:

 

https://easling-construction.squarespace.com/gallery/custom-home-1

Url doesn't exist.

@tuanphan

Hoping you can help me - I want to make it look like this: https://www.fairtrade-ifa.co.uk/ (hero graphic) 

Thank you!

Site url: https://www.tnfoam.com/markets

4 hours ago, jrebdesign said:

@tuanphan

Hoping you can help me - I want to make it look like this: https://www.fairtrade-ifa.co.uk/ (hero graphic) 

Thank you!

 

Site url: https://www.tnfoam.com/markets

which section do you want to apply this layout on your site?

@bangank36 on the homepage - header graphic 

On 4/6/2022 at 5:51 PM, jrebdesign said:

 on the homepage - header graphic 

 

You mean make image left, text right with 50% width?

@tuanphan yes please. 

and mobile like this:

On 4/11/2022 at 9:58 PM, jrebdesign said:

@tuanphan yes please. 

and mobile like this:

 

It looks like you figured it out with this code

body.homepage #page section:first-child .content-wrapper,body.homepage #page section:first-child {
    padding: 0 !important
}

body.homepage #page section:first-child .section-background {
    width: 50%;
    right: 50%;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important
}

body.homepage #page section:first-child {
    background: #e97060;
    margin-top: 10vh
}

html,body {
    overflow-x: hidden
}

@media screen and (max-width: 767px) {
    body.homepage #page section:first-child .section-background {
        width:100%;
        left: 0;
        height: 40vh;
        margin-top: 7vh
    }

    body.homepage #page section:first-child .content-wrapper {
        margin-top: 45vh;
        padding-left: 20px !important;
        padding-right: 20px !important
    }
}

body.homepage #page section:first-child h1 strong {
    color: #ece4df
}

body.homepage #page section:first-child .button-block a {
    background: #272559;
    color: #ece4df
}

@tuanphan

I haven't figured it out yet.  what do you put in the #page? is that a section id? a block id?

On 4/21/2022 at 2:07 AM, jrebdesign said:

@tuanphan

I haven't figured it out yet.  what do you put in the #page? is that a section id? a block id?

I see it is fine here?