What is the optimal mobile banner size on Shopify Sense?

Shopify Discussion
1

I’m using Shopify Sense, and I’m wondering about the size settings for mobile and PC versions. When I set the Slide Height to Medium, it fits well on mobile without cutting off the screen, but on PC, the screen appears.

Conversely, when I set it to ‘Adapt to first image’, the screen appears too small on mobile. Is there a solution to this issue?

2

Hi @frks1

Please share your store link

3

It’s about the slideshow section. I’d like to adjust the height and width of the images to ensure they are displayed properly on both PC and mobile versions without being cut off. Currently, I have coded the free theme to set up mobile banners, but the settings for PC and mobile versions don’t align properly.

4

I coded the CSS values.

Should I send you the store link, or do I need to provide the admin account details?

5

Should I send you the store link, or do I need to provide the admin account details?

6

Just share store link only

7

Here it is.

https://artynkitsch.com/

8

Please add this code at the bottom of your base.css file

#Slider-template--21467998388504__a23a0788-03de-4bff-9826-ebd59661651f .banner--adapt, #Slider-template--21467998388504__a23a0788-03de-4bff-9826-ebd59661651f .banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
    height: 33rem;
}
9

I tried entering it, but the banner gets cut off on the mobile screen. I have set the ‘Slide height’ to ‘Adapt to first image’. Could that be related?

10

Try to add this code to Custom CSS of banner section and check again

.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
    height: 33rem;
}

Screenshot 2023-11-14 at 10.42.31.png
Screenshot 2023-11-14 at 10.42.31.png527×733 111 KB

11

The mobile version no longer gets cut off and appears fine now. However, the PC version is getting cut off like the picture again :downcast_face_with_sweat:

Do you know the optimized resolutions for both mobile and PC versions?

스크린샷 2023-11-14 133411.png
스크린샷 2023-11-14 133411.png2902×1162 305 KB

12

I’m waiting for your response. :sob:

13

Hi @frks1

Sorry for missing your message. Please update my code to this

@media (max-width: 767px) {
.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
    height: 33rem;
}
}
14

Thank you, you’ve been a great help! However, since PC resolutions vary, the image keeps getting cut off on my computer like in the picture. What would be the best way to handle this?

15

Go to your Online store > Themes > Edit code > open theme.liquid file, find and remove this code to solve the issue with your image on PC

#shopify-section-template--21467998388504__a23a0788-03de-4bff-9826-ebd59661651f .banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
    height: 33rem;
}

If you cannot find and remove it, please add this code at bottom of your base.css file to solve

@media (min-width: 768px) {
.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
    height: auto !important;
}
}
16

It has been resolved!!! Thank you very much :blush: :blush:

17

You are very welcome :blush: