Quick CSS Question-Image Blocks

Site URL: https://thebombshellboss.com

Can someone PLEASE help me? I have tried every code and trick I can think of and I cannot seem to replicate the image with the block and button overtop (top of webpage on the right hand side) with full bleed. Any guesses? TIA! 

5 hours ago, Brooke_Shea said:

Site URL: https://thebombshellboss.com

Can someone PLEASE help me? I have tried every code and trick I can think of and I cannot seem to replicate the image with the block and button overtop (top of webpage on the right hand side) with full bleed. Any guesses? TIA! 

They are actual 2 section display side-by-side,what is your site url

@bangank36 I know that, I have already figured out the split bleed, its the card on the left I can't figure out how to replicate. the screenshot shows where I am now, but I want to add a card with a button on the left side 

1 minute ago, Brooke_Shea said:

@bangank36 I know that, I have already figured out the split bleed, its the card on the left I can't figure out how to replicate. the screenshot shows where I am now, but I want to add a card with a button on the left side 

Could you share your site url?

@bangank36 here it is! https://garlic-lettuce-ygc9.squarespace.com/ password: minted 

I appreciate you looking at it! Ive been trying for weeks! 

here is the website with the card I am trying to recreate https://thebombshellboss.com

2 hours ago, Brooke_Shea said:

@bangank36 here it is! https://garlic-lettuce-ygc9.squarespace.com/ password: minted 

I appreciate you looking at it! Ive been trying for weeks! 

here is the website with the card I am trying to recreate https://thebombshellboss.com

It can be achieved easier with 2 sections side by side

1. Create 2 sections, 1st create a stacked image block (enable link on button to show a button), 2nd leave empty or whatever you want. 

Add this image as image block about-stack.png (750×5) (squarespace-cdn.com), to get rid of the image style (we actually need the text and button here)

2. Grab the 1st section id using this tool, eg: section[data-section-id="60634f74ae24ab594f088b02"]

Squarespace ID Finder - Chrome Web Store (google.com)

3. Once you get your section's id using the extension, replace the it accordingly in this snippet

@media only screen and (min-width: 768px) {
    section[data-section-id="60634f74ae24ab594f088b02"],
    section[data-section-id="60634f74ae24ab594f088b02"] + .page-section {
      width: 50%;
      float: left;
    }
}

Admin set up and actual look of this proof-of-concept attached, I believe you can make some tweaks such as adding section background...

1 hour ago, bangank36 said:

Add this image as image block about-stack.png (750×5) (squarespace-cdn.com), to get rid of the image style (we actually need the text and button here)

 

First off thank you SO MUCH for taking the time to help me with this! This is the only part im having an issue with and I am not sure if its because I am a 7.1 template, but I cannot seen to add this image link into the block like I could on a 7.0 template? 

It is possible I have been looking at this page so long I am missing something obvious, but let me know! 

5 hours ago, Brooke_Shea said:

First off thank you SO MUCH for taking the time to help me with this! This is the only part im having an issue with and I am not sure if its because I am a 7.1 template, but I cannot seen to add this image link into the block like I could on a 7.0 template? 

It is possible I have been looking at this page so long I am missing something obvious, but let me know! 

Just download the image and upload to your site