Mobile banner index page, for Origin theme

[bug]

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 view, it mantains proportions, result as a small horizontal photo and lots of white space in the bottom.

[foxdeveloper]

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 happy to assist you with this build if you need it.

Let me know

[bug]

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

[foxdeveloper]

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?

[foxdeveloper]

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 > img {
   height:600px;
}
}

if it doesn’t work, then try adding the following instead:

@media(max-width:600px){
.banner__media {
    height:600px!important;
}
.banner__media.media.scroll-trigger.animate--fade-in > img {
height:600px!important;
}
}

Your result should look like this:

Let me know if this helped!

[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?

[foxdeveloper]

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 lines) and then add a classname to it such as homepagebanner (see screenshot)

The add the CSS as follows:

@media(max-width:600px){
.homepagebanner {
    height:600px;
}
.homepagebanner > img {
height:600px;
}
}

Essentially what we are doing here is targeting this element on it’s unique class name so it doesn’t affect any other elements.

If you can’t find the file, send a few screenshots of this section from within the Theme Customizer and from the code base and I can assist further. Thanks!

[bug]

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

[foxdeveloper]

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

It should look like this:

[bug]

[foxdeveloper]

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

[bug]

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

[bug]

i did this, but the image stretches

[foxdeveloper]

Hey @bug

The class name you edited broke the Html, you will need to add the class name inside of the " "

Eg.

Your code has extra “” which is causing it to break it

[bug]

THANK YOU!!!