Adding gray color behind image with text

Shopify Discussion
1

(Website is spacesavingbed.com) Hello! I want to add a gray background behind the text area of the image with the text section, as visualized in the picture below. Is it possible to do this? As in a separate square from the image, exactly as shown below, but filled in with gray and with no red border (the border is for visualization purposes). If not, then it’s all good.

Thank you in advance :slightly_smiling_face:

shopify support image.png
shopify support image.png1726×715 244 KB

2

Hello,

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” (3 dots button) and then “Edit code”.
  3. In the “Assets” folder, click on the css file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.

You need to find this class in your code:

@media (min-width: 768px) {
  .t4s-order-md-2 {
    order: 2!important;
    /* Add this 3 lines of code  */
    display: flex;
    align-items: center;
    background: #ededed;
  }
}

Remove this one:

.t4s-align-items-center {
  /* align-items: center!important; */ --> REMOVE LINE
}

And finally:

@media (min-width: 768px) {
  .t4s-order-md-1 {
    order: 1!important;
    /* Add this code to remove the padding between the image and the text container */
    padding-right: 0;
  }
}

Result:

dannyelo_0-1688956305154.png
dannyelo_0-1688956305154.png3024×1570 509 KB

Hope this helps,

1 Like
3

Hi @AhmedAM

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->t4s-base.css

.t4s-align-items-center {
    align-items: unset !important;
}
.t4s-order-md-2 {
    background: #c3c3c3 !important;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

1 Like
4

Brilliant! Thank you, worked right away :slightly_smiling_face:

5

Thank you for your help!

1 Like