What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Mobile banner index page, for Origin theme

Solved

Mobile banner index page, for Origin theme

bug
Tourist
8 0 0

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.

Accepted Solutions (2)
foxdeveloper
Shopify Partner
19 4 6

This is an accepted solution.

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: 

foxdeveloper_0-1699364436533.png

 

Let me know if this helped!

Please don't forget to Like and Mark Solution if this post helped you.

We turn coffee into code (and Shopify Magic!) and we savour your support, if you found this solution helpful, you can help keep us caffeinated here

Thanks!
Need a knowledgeable developer? Come and visit us at
https://shopifoxdeveloper.com


View solution in original post

foxdeveloper
Shopify Partner
19 4 6

This is an accepted solution.

Hey @bug

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

Eg. Screenshot 2023-11-08 153515.png

Your code has extra "" which is causing it to break it 🙂

Screenshot 2023-11-08 153403.png

Please don't forget to Like and Mark Solution if this post helped you.

We turn coffee into code (and Shopify Magic!) and we savour your support, if you found this solution helpful, you can help keep us caffeinated here

Thanks!
Need a knowledgeable developer? Come and visit us at
https://shopifoxdeveloper.com


View solution in original post

Replies 14 (14)

foxdeveloper
Shopify Partner
19 4 6

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

Please don't forget to Like and Mark Solution if this post helped you.

We turn coffee into code (and Shopify Magic!) and we savour your support, if you found this solution helpful, you can help keep us caffeinated here

Thanks!
Need a knowledgeable developer? Come and visit us at
https://shopifoxdeveloper.com


bug
Tourist
8 0 0
Hi! thank you!! my web is www.shopbug.co and password trabajando
🙂
foxdeveloper
Shopify Partner
19 4 6

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.png

Please don't forget to Like and Mark Solution if this post helped you.

We turn coffee into code (and Shopify Magic!) and we savour your support, if you found this solution helpful, you can help keep us caffeinated here

Thanks!
Need a knowledgeable developer? Come and visit us at
https://shopifoxdeveloper.com


foxdeveloper
Shopify Partner
19 4 6

This is an accepted solution.

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: 

foxdeveloper_0-1699364436533.png

 

Let me know if this helped!

Please don't forget to Like and Mark Solution if this post helped you.

We turn coffee into code (and Shopify Magic!) and we savour your support, if you found this solution helpful, you can help keep us caffeinated here

Thanks!
Need a knowledgeable developer? Come and visit us at
https://shopifoxdeveloper.com


bug
Tourist
8 0 0

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
Shopify Partner
19 4 6

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)

addclasslist.png

 

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!

Please don't forget to Like and Mark Solution if this post helped you.

We turn coffee into code (and Shopify Magic!) and we savour your support, if you found this solution helpful, you can help keep us caffeinated here

Thanks!
Need a knowledgeable developer? Come and visit us at
https://shopifoxdeveloper.com


bug
Tourist
8 0 0

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.pngScreenshot 2023-11-08 at 10.27.46 AM.png

foxdeveloper
Shopify Partner
19 4 6

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: Screenshot 2023-11-08 150638.png

Please don't forget to Like and Mark Solution if this post helped you.

We turn coffee into code (and Shopify Magic!) and we savour your support, if you found this solution helpful, you can help keep us caffeinated here

Thanks!
Need a knowledgeable developer? Come and visit us at
https://shopifoxdeveloper.com


bug
Tourist
8 0 0

Screenshot 2023-11-08 at 11.08.57 AM.png

foxdeveloper
Shopify Partner
19 4 6

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

bugscreenshot.png

 

Please don't forget to Like and Mark Solution if this post helped you.

We turn coffee into code (and Shopify Magic!) and we savour your support, if you found this solution helpful, you can help keep us caffeinated here

Thanks!
Need a knowledgeable developer? Come and visit us at
https://shopifoxdeveloper.com


bug
Tourist
8 0 0

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

bug
Tourist
8 0 0

Screenshot 2023-11-08 at 11.26.26 AM.pngScreenshot 2023-11-08 at 11.26.32 AM.pngi did this, but the image stretchesScreenshot 2023-11-08 at 11.27.10 AM.png

foxdeveloper
Shopify Partner
19 4 6

This is an accepted solution.

Hey @bug

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

Eg. Screenshot 2023-11-08 153515.png

Your code has extra "" which is causing it to break it 🙂

Screenshot 2023-11-08 153403.png

Please don't forget to Like and Mark Solution if this post helped you.

We turn coffee into code (and Shopify Magic!) and we savour your support, if you found this solution helpful, you can help keep us caffeinated here

Thanks!
Need a knowledgeable developer? Come and visit us at
https://shopifoxdeveloper.com


bug
Tourist
8 0 0

THANK YOU!!!!!!!!!!!!