Jump to content

Custom Css for Full Width Image- issues

Recommended Posts

Site URL: https://platinum-dalmatian-n9lk.squarespace.com/

I am trying to have some of my image blocks with text on the side display as full width images ( with no padding on top or bottom or side) however I do not want the text to be full width as it will not have enough padding on desktop and mobile. I used the  css code from ghost plugins and it is not working: see below. https://www.ghostplugins.com/steps/full-width-image-card-71-version

It stated to put in the page ID where the data-section is: i did that but it is not formatting the image. I also tried the data section id and that did not work. I also removed the 40 padding for text and that did not work. I am on SS 7.1 , (format for the block is height Small, Content Width Large and everything centered aligned.) 

 

Last I do not want to this to apply to all images on that page- just certain blocks. Is there a better code to use? 

// Full Width Image Card - Page Section //

[data-section-id="012345"] {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
    .content-wrapper  {
      padding: auto !important;
      margin: 0px auto;
      display: contents;
    }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}}

// Full Width Image Card - Text Padding //
  
.image-card-wrapper .sqs-dynamic-text-container {
  padding: 40px !important;
}

// Full Width Image Card - Mobile Stack //

@media (max-width: 800px) {
  .design-layout-card {
    flex-direction: column !important;
    .image-card-wrapper, .intrinsic {
      width: 100% !important;
}}}

Screen Shot 2022-02-21 at 10.34.14 PM.png

Screen Shot 2022-02-21 at 10.45.50 PM.png

Screen Shot 2022-02-21 at 10.45.40 PM.png

Link to comment
  • Replies 0
  • Views 559
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.