Jump to content

Two Column - image on left + Text with solid color backgroun on right or left - Full bleed

Go to solution Solved by GMH,

Recommended Posts

Hello,

I need to add more sections of Two Columns with text on a solid background color and an image to the right or left of the text. There should be no space between the sections, and both sides should bleed to the edges of the section.  There are already several sections on the website that look like this because of added CSS. However, the new sections I am creating now are not responding even though I have added the new section IDs to the list for the CSS code.

The new sections should look like this:

image.thumb.png.2cc0a5adcf69e35dc82a5d0387b48d98.png

Here is the code:

/* SPLIT LAYOUTS */
/* image on right */
#home-hero, #about-content-2 {
  background: #E2E8E3;
  .Index-page-content {
    margin: 0;
    width: 50%;
  }
  .Index-page-image {
    width: 50%;
    left: 50%;
    margin: 0;
  }

  @media screen and (max-width: 800px) {
    display: block;
    
    .Index-page-content {
      width: 100%;
    }
    .Index-page-image {
      width: 100%;
      position: relative;
      left: auto;
      height: 650px;
    }
  }
}

/* image on left */
#about-intro, #contact-intro, #services-intro, #house-calls-hero {
  background: #E2E8E3;

  .Index-page-image {   
    width: 50%;
    margin: 0;
  }
  .Index-page-content {
    margin: 0;
    width: 50%;
    left: 50%;
  }

  @media screen and (max-width: 800px) {
    display: block;

    .Index-page-content {
      width: 100%;
      left: auto;
    }
    .Index-page-image {
      width: 100%;
      position: relative;
      height: 650px;
    }
  }
}
 

 

Link to comment
  • 3 weeks later...

I found a solution at https://www.ghostplugins.com/steps/etgh285n. The code makes image blocks (card design) full-width. I was also able to add a background color.

// Full Width Image Card //

#URL-SLUG .Index-page-content {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  max-width: 100%;
  background: #E2E8E3;
}

The only issue left is that the text area is white. I would like to make it the same color as the background or transparent. I haven't found CSS that has worked. See the image below

image.thumb.png.b8c7d90b8090e2184e08a83260e5316e.png

Thanks in advance! 🙂

Link to comment
  • Solution
Posted (edited)

I figured out how to have an image block (card design) be full-width with a custom background color for the text side.

// Full Width Image Card //

#URL-SLUG .Index-page-content {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  max-width: 100%;
} 

.image-card-wrapper {
    background: transparent !important;
}

image.thumb.png.8ae2bac3f4da5d619564e4106af16b71.png

 

Edited by GMH
needed to update message
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.