How can I display my website banner fully on mobile?

Store Design
,
1

Hi

I’m constructing my website on Shopify. And the theme I’m using is Studio Theme. I’ve encountered a problem: the banner of the website isn’t shown fully on the mobile. It’s like the banner is cut off on the mobile. I’ve consulted in the community and it seems that the problem can be solved by code editing.

However, I’ve tried some codes mentionend in the community and none of them works. Please help to resolve this problem ASAP.

Thank you.

banner on mobile.png
banner on mobile.png1178×862 94.4 KB

1 Like
2

@patriciashen - please use 2 sections

first for desktop banner and second for mobile banners

then using css, you can hide one of the sections as per the device view

3

Hi @patriciashen ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-image-banner.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
    .slideshow__media {
        position: static !important;
    }
    .slideshow__media img {
        position: static !important;
        object-fit: contain;
    }
    .slideshow__text-wrapper {
        position: absolute !important;
        top: 0;
        left: 0;
        transform: translate(-50%,-50%)
    }
}

I hope it would help you
Best regards,

Richard | PageFly

1 Like
4

Hi

Thank you for the prompt reply. According to your message, I should make two pictures in two different sizes, one for deskstop and one for mobile. Is that right?

Then I should add css code to hide one of these two pictures as per the device view. Could you send me the code please? And in which file should I add this code?

Thank you very much

5

It works!! Thank you so much :grinning_face:

6

You can scale the image down to fit width wise and show the full image if you set to ‘Image Height’ for the banner size. Otherwise I would suggest using the css code above from pagefly. Or if you want 2 different images and the option to have more control over how each image looks (desktop/mobile), you’ll have to do the show hide css in your theme editor.

Unfortunately the css above for @media will only work in your theme editor as well as I don’t believe the new ‘custom css’ box in customizer sections allows for @media rules

7

Hi.

Thank you for the reply. You’re right. The css above only works for theme editor. I need the show hide css in theme editor as I also need to adjust other elements for mobile. Could you tell me how to edit this show hide css? Thank you :grinning_face:

8

Hi @patriciashen ,

If you did the two sections method, you could use each section ID with an @media rule as shown above.

Hide desktop section when it hits mobile screen size, and vice versa for the mobile. Instead of targeting a ‘class’ with .slideshow… you can target an ID with

#shopify-section-template–18040306204956__slideshow (your current slider ID).

Simply duplicate that section in your customizer, adjust one for desktop, one for mobile. You can ‘inspect element’ on the page to easily find your ID’s.

To use a class selector, use the . (period). To use an ID selector use a #. Class selectors may affect multiple elements, where ID’s are typically specific to a singular element.

You could do something like this in your .css file:

@media screen and (max-width: 749px) {
    #shopify-section-template--18040306204956__slideshow {
     display:none;
  }
}
@media screen and (min-width: 750px) {
    #new section id for mobile {
     display:none;
  }
}