Add a heading above text with image in Dawn?

[jasminsharp97]

I'm working on the About page of this website: https://maison-rouge-ny.myshopify.com/pages/about

PW: thifis

I'm trying to add a heading above the image, I'm using a custom liquid section that I just duplicated from the "text with image" section in that theme. I want to end up having the design look like this (bonus points if you can help me figure out how to flip the columns as well):

[jasminsharp97]

That doesn't address my issue at all

[jasminsharp97]

I'm working on the About page of this website: https://maison-rouge-ny.myshopify.com/pages/about

PW: thifis

I'm trying to add a heading above the image, I'm using a custom liquid section that I just duplicated from the "text with image" section in that theme. I want to end up having the design look like this (bonus points if you can help me figure out how to flip the columns as well):

[jasminsharp97]

Can you clarify where I find the image in the liquid? I can't figure out where the image is to add the header above it.

[DaisyVo]

Hi @jasminsharp97 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

div#shopify-section-template--18647897604308__image_with_text_halves_Me8QpC .image-with-text-halves__grid.grid {
    flex-direction: row-reverse !important;
}
div#shopify-section-template--18647897604308__image_with_text_halves_Me8QpC .image-with-text-halves__grid.grid > .image-with-text-halves__media-item {
    position: relative !important;
}
div#shopify-section-template--18647897604308__image_with_text_halves_Me8QpC .image-with-text-halves__grid.grid > .image-with-text-halves__media-item::before {
    content: "TEXT HEADING";
    position: absolute !important;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    font-weight: bold;
}

Here is the result: https://prnt.sc/fY_4Wmfq3Gl_

I hope this helps

Best,

Daisy

[jasminsharp97]

That worked part of the way, but for some reason only half of the text is showing. I adjusted some of the text settings and I think that broke something. I also need more space between the content and the image, like in the example. See what it looks like now:

[DaisyVo]

Hi @jasminsharp97 

If you want to have more space you can adjust the top code here https://prnt.sc/qqbGCGsbKPwA 

And could you please share with me the screenshot you added into the CSS custom so I can take a look if you added it correctly

Best,

Daisy

[jasminsharp97]

Thanks! Adjusting the top code fixed the spacing issue. I realized I could see the whole heading when I zoomed out farther, it's just getting cut off when I zoom in. How do I prevent the text from disappearing if I zoom in too far?

[DaisyVo]

Hi @jasminsharp97 

If you zoom in too much, of course, the layout will break—there's really no way to prevent that! 😅

If my code helped solve your problem, please give us a like and mark it as the solution.

Thank you! 🥰✨

Best,

Daisy

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi @jasminsharp97    Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
  .section-template--18647897604308__image_with_text_halves_Me8QpC-padding . image-with-text-halves__grid{
      flex-direction: row-reverse !important;
}

.section-template--18647897604308__image_with_text_halves_Me8QpC-padding . image-with-text-halves__grid .image-with-text-halves__media-item::before{
   position: relative !important;
   

}
.section-template--18647897604308__image_with_text_halves_Me8QpC-padding . image-with-text-halves__grid .image-with-text-halves__media-item::before{
   content: "PATRUCIA MARGRO",
   top: -50px;
   position: absolute !important;
   left: 50%;
   font-weight: bold;
   color: black;
}

</style>

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

[jasminsharp97]

I tried doing that and it didn't do anything!

[PageFly-Richard]

Thank you !