Centering image in 'Image with text'

[SoarMusic]

Hey there,

I’m trying to center the image within the ‘Image with text’ section of my homepage. Here is a link to the store: https://portal.soarmusicgroup.com

I would like to center it only on mobile, as it is now overlapping the right corner of the screen (as pictured in the screenshot). I would like the image to stay centered and within the boundaries of the screen.

Thanks in advance for any help!

[Mehedi06]

Hi @SoarMusic ,
Can you please follow these steps?

1. Go to the ‘Edit Code’ Section.

2. Find ‘theme.liquid’.

3. Search (ctrl+f) ‘.image-with-text__media-item’ class.

4. add ‘transform: none’ (like in the below screenshot).

Then, it should look like this:

[Made4uo-Ribe]

Hi @SoarMusic

check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px) {
  .image-with-text [data-aos=fade-left] {
    transform: none;
  }
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Tech_Coding]

Hello @SoarMusic

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ [data-aos=fade-left] { transform: unset !important; } }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.