Thanks for this, it was very helpful! I was able to switch my image to a more mobile-friendly format, but the effect (film grain) was still missing, even after using the second bit of code. I'm using the Mycelium template. Any advice would be super appreciated!
Hi there! The video was super helpful and everything worked great! Only issue I'm having is that the images on my carousel (I used the people gallery section) have disappeared on mobile. All of the buttons and the arrows are present but the images have disappeared. Any ideas?
If it is the same image then you can use a comma in between the collection ids. For example /* Rebecca Grace Designs Mobile Banner Image */ @media only screen and (max-width: 640px) { #COLLECTIONID, #COLLECTIONID, #COLLECTIONID{ #page .page-section:nth-of-type(1) { .section-background img { display: none !important; } .section-background { background: url("IMAGE URL"); background-repeat: no-repeat; background-size: 100%; } } } } If you want different images on each section, then you will have to repeat the whole code.
Very helpful, thank you. Effect is still missing however, any fix?
Very helpful 👌thanks a lot. Hug from Switzerland
Thanks for this, it was very helpful! I was able to switch my image to a more mobile-friendly format, but the effect (film grain) was still missing, even after using the second bit of code. I'm using the Mycelium template. Any advice would be super appreciated!
Would you know how to do this for a gallery section?
Thank You! this was really helpful
You're welcome!
does this work for video too?
Hi there! The video was super helpful and everything worked great! Only issue I'm having is that the images on my carousel (I used the people gallery section) have disappeared on mobile. All of the buttons and the arrows are present but the images have disappeared. Any ideas?
Thank you for letting me know. I have updated the code on my blog. Try using the new code instead!
I did it but I still have the front image showing up on the mobile as well as the new BACKGROUND image.
Love it!! Thank you so much!!!!!!!
Hi, when I right click on the image to open it in a new tab, it doesn't give me the option 😐 is there another way to do this?
Hi if you click on the 3 dots on the image and select 'File Details' you can then right click 'Open image in new tab'
Could you create code to do this to multiple pages on a site? It has been a while since I took a coding class and I keep getting error messages :,)
If it is the same image then you can use a comma in between the collection ids. For example
/* Rebecca Grace Designs Mobile Banner Image */
@media only screen and (max-width: 640px) {
#COLLECTIONID, #COLLECTIONID, #COLLECTIONID{
#page .page-section:nth-of-type(1) {
.section-background img {
display: none !important;
}
.section-background {
background: url("IMAGE URL");
background-repeat: no-repeat;
background-size: 100%;
}
}
}
}
If you want different images on each section, then you will have to repeat the whole code.
Thanks!
No problem!