Trouble adapting the banner image in the home page, for it to fill the screen in the mobile view…, thought about uploading a different photo for mobile view thats vertical, but couldnt work it around. any ideas? The issue is that de 3:2 image im using in desktop works perfectly but for the mobile …

For Demo purposes I’ve made it to be 600px on mobile. To replicate this, you can add the following CSS into your main CSS file (base.css). Please add this at the bottom of the sheet! @media(max-width:600px){ .banner__media { height:600px; } .banner__media.media.scroll-trigger.animate--fade-in > …

Hey @bug , Could you provide me with the URL and Store password (if it’s applicable) and I can take a look. From the information you’ve given the best option here, would be to build a separate image that shows on mobile so that it can have the proper dimensions and fit the screen correctly. I’m ha…

Hi! thank you!! my web is www.shopbug.co and password trabajando :slightly_smiling_face:

Hey @bug , thanks! Are you talking about this white space outlined in the screenshot? If so, do you plan on adding anymore content to your home screen? If so this will allow the whitespace to be filled up by content. If not, how much bigger do you want the home page image to be? [screenshot - bug…

Thanks a lot, it worked. The problem is that it also affectes a presentation that i have inside solid gold, the images are cropped. maybe what would work best is to add code to replace the banner image of the homepage only when its mobile, is there a way to do this?

Hey @bug , Ah okay I see. Yeah so most likely the class names are shared so the above CSS then applies to all elements containing that class name. The easiest and quickest option would be to find this header element from within your code base (it will be named banner-image so something along those…

I understand the targeting, but have been fighting with the structure of the code, cant find the element. [Screenshot 2023-11-08 at 10.25.03 AM.png] [Screenshot 2023-11-08 at 10.27.46 AM.png]

Hey @bug , could you send me a screenshot of your Theme Customer please? I need to find out the section name and I can provide you with the exact location of the file :slightly_smiling_face: It should look like this: [Screenshot 2023-11-08 150638.png]

[Screenshot 2023-11-08 at 11.08.57 AM.png]

Thanks! @bug it should be sections > image-banner.liquid, around line 56 [bugscreenshot.png]

Great!, so there i should replace banner__media media for homepagebanner?

Mobile banner index page, for Origin theme

Store Design

bug November 8, 2023, 1:29pm 8

I understand the targeting, but have been fighting with the structure of the code, cant find the element.

Topic		Replies	Views
Banner not properly displayed on mobile version of our page Store Design design , customizations , landing-page , css	6	56	May 2, 2025
different image for mobile and Desktop Store Design design , css	6	48	December 5, 2024
How to fix a too small image banner on mobile? Store Design landing-page	14	84	February 7, 2024
Image not fitting properly in image banner Store Design	7	173	August 21, 2023
MOBILE AND DESKTOP BANNER DIMENSIONS Store Design customizations , shopify-themes , html	12	146	January 6, 2025

Mobile banner index page, for Origin theme

Related topics