Edit image positioning in slideshow on mobile view (Brooklyn Theme)

Store Design
1

Hi there, I am using the Brooklyn Theme for my website (www.blumorganics.com.au) and I would love to edit the position of the first image on my slideshow on my homepage in mobile view as my product (the aura mist bottle) is positioned quite off-centred.

Here are some screenshots to show the difference:

MOBILE VIEW:

IMG_2146.PNG
IMG_2146.PNG1242×2688 187 KB

DESKTOP VIEW:

Screen Shot 2022-01-18 at 3.16.54 pm.png
Screen Shot 2022-01-18 at 3.16.54 pm.png2880×1358 358 KB

Any help would be greatly appreciated! Thanks so much :slightly_smiling_face:

2

@chloe27

sorry i can’t see your attachment

can you upload here

https://pasteboard.co/

3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media screen and (max-width:575px){
#HeroWrapper-slideshow .hero .hero__image {
object-position: 41% !important;
}
}
4

Hi @ZestardTech thank you so much for your response - I can only see “theme.scss.liquid” under “assets” in my theme’s code. Is it okay to edit that one instead of “theme.css”?

5

ok add code in this one file theme.scss.liquid

6

Thank you so much! :slightly_smiling_face: That worked for me!

7

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.