Why are parts of my mobile slideshow image off-center?

Store Design
, , , , ,
1

Hey Shopify Support Team,

I’m dealing with a pretty annoying problem on my Shopify store, and I could use some assistance. Here’s the deal: my slideshow banner looks great on desktop, but when it comes to mobile, the images are way off-center. To try and fix it, I messed around with the CSS code, adding “margin-left: -100px” for when the screen is less than 767px in width. That managed to center the part of the image I wanted on mobile, but there’s a big issue – a chunk of the image is now missing.

I’ve scoured the ‘component-slideshow.css’ file and tried all sorts of tweaks, but I’m not having any luck. Just so you know, I’m using the Taste theme.

I know it’s a bit of a head-scratcher, but any help or advice you could provide would be super appreciated. It’s bugging me, and I’m eager to get it sorted out.

If you need more info or access to my store to dig into this, feel free to give me a shout. Your quick response and insights would be a game-changer, and I’m really hoping you can help me out.

CSS code added to component-slideshow.css:

/* Mobile styles */
@media screen and (max-width: 767px) {
.slideshow__slide {
overflow: visible;
}
.slideshow__slide img {
/* Remove max-width constraint */
min-width: 100%;
/* Adjust margins and scaling */
margin-left: -100px;
transform: scale(1.5);
}
}

DESKTOP:

desktop_photo.PNG
desktop_photo.PNG3758×1535 447 KB

MOBILE:

mobile_photo.PNG
mobile_photo.PNG709×1281 389 KB

2

Hi @brightnight1012

Please drop your page link here to check

3

vanishpen.co

4

Your store has password protected

5

Try now, temporarily removed it.

6

Please remove margin-left: -100px; in your this code

.slideshow__slide img {
/* Remove max-width constraint */
min-width: 100%;
/* Adjust margins and scaling */
margin-left: -100px;
transform: scale(1.5);
}
}

And then add this addition code

.slideshow__slide img {
object-position: center right !important;
}
7

Thanks! But now too much of the left side of the image is cut off. I want the persons that are in the image to be perfectly in the middle of the image when viewed on mobile.

8

Change my code to this

.slideshow__slide img {
    object-position: -200px center!important;
}
9

Code:

/* Mobile styles /
@media screen and (max-width: 767px) {
.slideshow__slide {
overflow: visible;
}
.slideshow__slide img {
/ Remove max-width constraint /
min-width: 100%;
/ Adjust margins and scaling */
margin-left: -100px;
transform: scale(1.5);
}
}

.slideshow__slide img {
object-position: -200px center!important;
}

Result:

error.PNG
error.PNG708×1266 343 KB

10

Please remove margin-left: -100px; from your code

11

Thanks a bunch! So, the main thing I’m struggling with is getting the characters from my photos smack in the middle of the mobile screen. Any tips on how to make that happen?

12

Change my code to this

.slideshow__slide img {
    object-position: -280px center!important;
}
13

I figured it out!

/* Mobile styles /
@media screen and (max-width: 767px) {
.slideshow__slide {
overflow: visible;
}
.slideshow__slide img {
/ Remove max-width constraint /
min-width: 100%;
/ Adjust object-position to move image 100px to the right */
object-position: -300px center!important;
}
}

EDIT: I find it funny we came to the conclusion at exactly the same time lol.

1 Like