Shopify themes, liquid, logos, and UX
Hello everyone,
I would like to have separate banners for mobile and desktop. I've managed to code it, but the mobile image is being cut, which is not what I want. I'd like it to occupy the full height of the display. Could you please help me with this?
Thank you!
my code:
.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
width: 100%;
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
}
Solved! Go to the solution
This is an accepted solution.
Hi @JackHampel ,
Please try adding below codes to and see if this works ?
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above </body> tag
<style>
@media screen and (max-width: 749px){
#shopify-section-template--20092381397327__4e8f1253-d79c-4c20-873a-3a676d5b44dd .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 69rem;
}
}
</style>
If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
This code will make sure that on screens smaller than 750 pixels wide, the banner image will take the full height of the viewport without getting cut off and will maintain its aspect ratio using:
.banner__media {
width: 100%;
height: auto; /* Set height to auto to maintain aspect ratio */
}
@media screen and (max-width: 749px) {
.banner__media {
width: 100%;
height: 100vh; /* Set height to full viewport height */
object-fit: cover; /* Maintain aspect ratio without cropping */
}
}
I hope it helped you!
Thanks for the quick reply! Unfortunately, it didn't quite do the trick, and now the first desktop image has disappeared. Any chance you could help me out with this?
Can you provide link to the page that has the issue? I will look onto the issue and provide solution accoringly
This is an accepted solution.
Hi @JackHampel ,
Please try adding below codes to and see if this works ?
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above </body> tag
<style>
@media screen and (max-width: 749px){
#shopify-section-template--20092381397327__4e8f1253-d79c-4c20-873a-3a676d5b44dd .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 69rem;
}
}
</style>
If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
It worked!!! Thank you very much!
where to put this code ? base.css ?
Tried. This code works but requires two images to be loaded in image banner. This leads to deteriorated image quality.
https://www.youtube.com/watch?v=zUnVUOEKFSA by websensepro is better and simple and no issue of image quality deterioration (my opinion)...Thanks websensepro
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024