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