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 · Accepted solution]

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 </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
    [data-aos=fade-left] {
       transform: unset !important;
    }
}
</style>

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