Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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:
Let me know if this helped!
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.
Your code has extra "" which is causing it to break it 🙂
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
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?
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:
Let me know if this helped!
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 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!
I understand the targeting, but have been fighting with the structure of the code, cant find the element.
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:
Thanks! @bug it should be sections > image-banner.liquid, around line 56
Great!, so there i should replace banner__media media for homepagebanner?
i did this, but the image stretches
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.
Your code has extra "" which is causing it to break it 🙂
THANK YOU!!!!!!!!!!!!
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024