All things Shopify and commerce
Hi, I use Dawn theme and it only allows to enter one picture to the banner and the same image is used for notebook version and mobile version. I would like to use a different image in a different size for mobile version, How can I do that?
shoptarz.com
Hi @LuizaSMC23
To complete your requests, please follow these steps:
Add Images for Desktop and Mobile:
Add Custom CSS in Shopify:
.banner .banner__media.media:nth-child(2) {
display: none;
}
.banner .banner__media.media:nth-child(1) {
width: 100%;
}
@media screen and (max-width: 768px){
.banner .banner__media.media:nth-child(2) {
display: block !important;
width: 100%;
}
.banner .banner__media.media:nth-child(1) {
display: none;
}
}
Here is the result: https://prnt.sc/4SEokLkf2Z_e
I hope this helps
Best,
Daisy
Hello dear,
Thank you so much for your help! If you could please give me another hand, the code worked to add different images for mobile and notebook version, but now the images are not showing in the right size, they are being cut.
Please see how I see on editor's page:
For notebook version it is correct on editor's page, only on live the image is being cut, looks like it is zooming in the image
this is how it looks on live:
For mobile version the height of the image is being cut:
The full image is this:
Hi @LuizaSMC23
Please add this code more into the same position above:
@media screen and (max-width: 768px){
div.banner.banner--content-align-center.banner--content-align-mobile-center.banner--medium {
height: 600px;
}
}
Here is the result: https://prnt.sc/oUT-UsQZa2uE
I hope this helps
Best,
Daisy
Hello,
I'm sorry, it didn't work. Here is what I past in the custom CSS field:
.banner .banner__media.media:nth-child(2) {
display: none;
}
.banner .banner__media.media:nth-child(1) {
width: 100%;
}
@media screen and (max-width: 768px){
div.banner.banner--content-align-center.banner--content-align-mobile-center.banner--medium {
height: 600px;
}
}
}
.banner .banner__media.media:nth-child(1) {
display: none;
}
}
Now this is what I see on editor's page (it is getting only the first image added for notebook version, but on live the image is still the same as before, cut and showing the second image added):
Hi @LuizaSMC23
It must be:
.banner .banner__media.media:nth-child(2) {
display: none;
}
.banner .banner__media.media:nth-child(1) {
width: 100%;
}
@media screen and (max-width: 768px){
.banner .banner__media.media:nth-child(2) {
display: block !important;
width: 100%;
}
.banner .banner__media.media:nth-child(1) {
display: none;
}
@media screen and (max-width: 768px){
div.banner.banner--content-align-center.banner--content-align-mobile-center.banner--medium {
height: 600px;
}
}
Hi, it worked for mobile! But now for notebook the image is cut, also the image quality has decreased, is it because of the code?
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