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;
}}}