Slideshow picture getting cut in mobile but ok in desktop version

Hina_Agarwal
Explorer
48 0 15

Dear Team,

I have uploaded one banner in slideshow -1st Pic. It's perfectly fine in desktop version but picture is getting cut from the left side. Request the team to help in this. Thank you.

URL: www.fruitopia.in

Mobile Version:

Mobile version.jpeg

0 Likes
Hyde
Shopify Staff
Shopify Staff
861 96 155

Hi @Hina_Agarwal,

Hyde here from Shopify.

Shopify's themes are responsive, meaning that they adapt to the device being used to access the site. So we have some best practices for using images here.

Most crucial to you is that you ensure all the important information is in the center of your picture:

 

21-04-xg3az-eujy5

 In your case, you will need the informational text to be in the center of the picture or you could eliminate it altogether. As you can see, if important details are included around the perimeter of a picture they may be cut off:

21-04-o4jup-cs95l

 

I hope that helps!

All the best, Hyde.

Hyde | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

@Hina_Agarwal 

Have you added some custom code to make your header sticky? Because it's on top of your first section, subsequently cutting off the image.

It's doing it on desktop as well, but the issue is clearer when viewed on mobile.

I suggest to remove the code to make the header sticky and find a better alternative. It may be blocking other valuable information on other pages that hasn't yet crossed your attention.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Tutorials: Minimal theme product pages slideshow | Debut Theme product pages slideshow
◦ Looking to hire a reliable Shopify developer? Same day response: ezfycode@gmail.com.
Quyen_Beo
Explorer
58 7 12

I saw it been fixed and the whole image showing on mobile. But it look not good because the image is fit with desktop while screen is horizontal rectangle. On mobile the screen is vertical rectangle so that image will not good.
You can edit the code to add a section settings for a separate mobile image. So with each slide you can upload 2 separate image for desktop & mobile/
If you not familiar with coding, hire a developer to do it for you.
Note: Please do care about the speed optimizing after making it this way.

Quyen_Beo_0-1618594703836.png

 

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
Hina_Agarwal
Explorer
48 0 15

Hi Diego,

Thanks. Yes, I have added following code to make the header fixed. Request you to help with the alternate solution for making header sticky.

#SearchDrawer {
z-index:1001;
}

#shopify-section-header {
position: fixed;
z-index:1000;
left:0;
right:0;
-webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
-o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
background-color: {{ settings.color_body_bg }};
}

#PageContainer {
padding-top: 80px;
}

 

.grid__item.large--one-third.medium-down--one-half {
@include at-query($min, $large) {
position: absolute;
top: 42px;
left: 30px;
}
}

 

0 Likes
Hina_Agarwal
Explorer
48 0 15

Thanks.

0 Likes
Hina_Agarwal
Explorer
48 0 15

Hi,

Thanks. Can you pls. help with the codes?

 

Regards,

Vishal

0 Likes