Image half way through white and pink section

Store Design

Topic summary

A user seeks to position a circular woman icon so that half of it overlaps between white and pink sections on their store page.

Solutions Provided:

Two community members offered CSS code solutions:

  • Simonsron’s approach: Add transform: translateY(-50%) to .text__image__wrapper to shift the image upward by 50%

  • shubhamSharma’s approach: Apply transform: translateY(-50%) to .text__image__wrapper img and add margin-top: 3rem with positioning adjustments

Follow-up Issue:

After implementing a solution, the user reported excessive spacing appeared, with text positioned too far below the image.

Additional Fix:

Simonsron provided CSS to reduce spacing by adding position: relative and top: -100px to the .text__heading element.

The discussion appears resolved with the user accepting one of the solutions.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hi,

i would like to have the icon of the woman to be half (of the circle) between the white and pink section.

url : www.lesparentales.ca

Thansk,

CLaudie

Capture d’écran (158).png
Capture d’écran (158).png1920×1080 277 KB

2

Palo Alto

3 
#Text--template--15970693218474__4de30a4a-446f-4b7d-89e7-709ad0ab8236 .text__image__wrapper{
transform: translateY(-50%);
}

Simonsron_0-1674008822922.png
Simonsron_0-1674008822922.png1920Ă—929 138 KB

like this?

4

hello @Lesparentales

step 01:

  1. Go to your Store > Theme > click to edit code.
  2. find this file " theme.css " and open.

step 02:

  1. Paste the code at the end of the file.
.text__image__wrapper img {
    transform: translate(0px, -50%);
}
.section-padding.text-section.text-dark {
    margin-top: 3rem;
}

Les-Parentales-Ta-boutique-d-achat-local-pour-maman-et-famille.png
Les-Parentales-Ta-boutique-d-achat-local-pour-maman-et-famille.png1556Ă—454 69.7 KB

this idea helps you

1 Like
5

yes but now the spacing there is a bit too big, how can i make the text go up

Capture d’écran (160).png
Capture d’écran (160).png1920×1080 303 KB

6 
#Text--template--15970693218474__4de30a4a-446f-4b7d-89e7-709ad0ab8236 .text__heading{
    position: relative;
    top: -100px;
}
7

hello @Lesparentales

I’m really happy to help you, thanx for accepting my solution and please like my post

thank you!

~ Shubham Sharma