Image next to text - full bleed 7.1

Hi, 

Just wondering how you can go about adding an image next to a block of copy with a colored background in 7.1 so they scale together. Like the attached image.
 

Step 1. Add Blank Section

Step 2. Add Background Image

Step 3. Add 2 Columns

left: Text Block

right: Spacer Block

Step 4. Use CSS Float to push image to right, & reduce image to 50%

Step 5. Use CSS to rever image size to 100% on mobile.

Can you  do steps 1,2,3 then share link? I can take a look

Thanks Tuan! Will start working on this asap, probably a stupid question, how do I add 2 columns? 😬

Hey @tuanphan I added up to step 3 like you mentioned, it's located under the email sign up.

lettuce-beagle-ds22.squarespace.com and the password is Whitefern2020

Thanks!

@tuanphan what is css float?

5 hours ago, laurenjaynehughes said:

Hey @tuanphan I added up to step 3 like you mentioned, it's located under the email sign up.

lettuce-beagle-ds22.squarespace.com and the password is Whitefern2020

Thanks!

5 hours ago, monicahardy said:

@tuanphan what is css float?

 

where email signup?

Sorry, it's the section on the page with this copy on the left

"WHITE FERN WEDDINGS: Our bespoke wedding styling ensures the most important day of your life looks exactly how you imagined it would, so you can relax and enjoy every moment of your perfect day."

Thanks!

7 minutes ago, laurenjaynehughes said:

Sorry, it's the section on the page with this copy on the left

"WHITE FERN WEDDINGS: Our bespoke wedding styling ensures the most important day of your life looks exactly how you imagined it would, so you can relax and enjoy every moment of your perfect day."

Thanks!

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
[data-section-id="5ebb4ca25111036cfc859fed"] .section-background {
    width: 50%;
    left: 50%;
}
}

Thanks! So if I wanted the color background to be behind the copy and an actual photo to be on the right, how would I do that? And right now when it goes to mobile it's just one section? Thank you so much!

3 minutes ago, laurenjaynehughes said:

Thanks! So if I wanted the color background to be behind the copy and an actual photo to be on the right, how would I do that? And right now when it goes to mobile it's just one section? Thank you so much!

Add image to section background.

& set  section background color

Thank you @tuanphan! This is looking perfect on Desktop, is there a way to have it stacked on mobile and iPad with the copy first?

Just wondering if anyone knows how to achieve what I asked above? Thanks!

Hi, I have tried the CSS above and it works well. But I cannot change the theme color, whatever I do it still keep the same white background.  And I also have the same issue with stacking on mobile version. Can you please help with this? 

Thanks a lot!

On 12/26/2020 at 1:18 AM, TessPham said:

Hi, I have tried the CSS above and it works well. But I cannot change the theme color, whatever I do it still keep the same white background.  And I also have the same issue with stacking on mobile version. Can you please help with this? 

Thanks a lot!

Can you share site url? We can help easier

@tuanphan Thank you for this fix! I was wondering if you were able to look into the previous posters question about (1) stacking in mobile and (2) changing the background color of the text half.

I am running into the same issue where on mobile the text overlaps the background image, and when I change the background color it remains black in my case.

https://heron-snail-244c.squarespace.com/careers-1

Thank you!

On 8/19/2021 at 12:45 AM, kethee said:

@tuanphan Thank you for this fix! I was wondering if you were able to look into the previous posters question about (1) stacking in mobile and (2) changing the background color of the text half.

I am running into the same issue where on mobile the text overlaps the background image, and when I change the background color it remains black in my case.

https://heron-snail-244c.squarespace.com/careers-1

Thank you!

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