Replicating a split-screen view in 7.1

Site URL: https://wildminimalist.com/

Hey Circle! Does anyone know how to replicate a split-screen layout like the one shown here: https://wildminimalist.com/?

Loving this site's look but have no idea how I'd make that work with Squarespace 7.1.
Ideally on mobile, the left side of the split screen would sit above the right side. I appreciate any tips!

You mean this section?

Good for You, Good for the Earth (and Good Looking)

9 hours ago, tuanphan said:

You mean this section?

Good for You, Good for the Earth (and Good Looking)

@tuanphan, hi! this section here on the homepage:

@tuanphan here is the code I've been playing around with but it's not working yet. I found someone's tutorial online and have been trying to adjust it to fit 7.1. (I started with an image block).

#yui_3_17_2_1_1590152976189_90 {
  .content-wrapper {
    padding: 0px!important;
    max-width: 100%;
    .sqs-block {
      padding: 0px!important;
    }
    .image-inset.content-fit {
      height: 100%
    }
    .design-layout-card img {
      height: 100%!important;
      object-fit: cover;
      -o-object-fit: cover;
    }
    @media screen and (max-width: 640px) {
      .sqs-block-image .design-layout-card:not(.sqs-narrow-width) {
        display: block;
      }
      .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child {
        width: 100%;
      }
      .sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper {
        position: relative;
        width: 100%;
      }}}}

You insert background image, then add 2 column

• Left: Text Block + Button Block
• Right: Spacer Block

Next, set .section-background class 50% width & change margin-left: 50% or left:50% to push background image to right, you will have split layout on desktop

Next, on mobile, set section-background 100% width & adjust margin-top to stack text to top, image bottom

@tuanphan Thanks!--I'm not great at coding yet. here's what I tried for this website page (password: letmein)

#5ec7d3af9bcd1c64193d65e2 {
  .section-background {
    max-width: 50%;
    margin-right: 50%; 
  }
  
  @media screen and (max-width: 640px) {
    .section-background: 100%;
    .margin-top: stack text to top, image bottom
  }}

[data-section-id="5ec7d3af9bcd1c64193d65e2"] .section-background {
    width: 50%;
    left: 50%;
}

@tuanphan Thank you! I hate to keep asking for help! here's what I have for mobile. It's not working

[data-section-id="5ec7d3af9bcd1c64193d65e2"]
.section-background {
    width: 50%;
    left: 50%;
}

@media screen and (max-width: 640px) {
      .section-background {
        width: 100%;
        margin-top: text;
        margin-bottom: image;
      }
  }

For future members

You can use CSS Flexbox to change image/text order on mobile only

I am trying to do a split screen header panel but this code doesn't seem to work now?

On 3/16/2022 at 6:46 PM, Potter said:

I am trying to do a split screen header panel but this code doesn't seem to work now?

What is your site url? We can give the code for your case

Or You can also use Split Layout Plugin to achieve this.

Thank you

Sorry this was on hold: https://fox-trombone-wtgn.squarespace.com/config/design/custom-css

10 hours ago, Potter said:

Sorry this was on hold: https://fox-trombone-wtgn.squarespace.com/config/design/custom-css

Which page are you referring to?

The home page header, I want it to look like the attached ideally.

On 5/25/2022 at 3:35 PM, Potter said:

The home page header, I want it to look like the attached ideally.

Your site is private. Can you check it again?

I will set up and send over

https://fox-trombone-wtgn.squarespace.com/config/

Torstig_Bar123

On 6/8/2022 at 4:03 PM, Potter said:

https://fox-trombone-wtgn.squarespace.com/config/

Torstig_Bar123

I think you can add 2 sections, then we can give code to make them side by side. It will be easier