Shopify themes, liquid, logos, and UX
We have a 2.0 Dawn theme that is using a paid, customised theme. For About Us page, we are using a customised Parallax theme that serves like a banner image section with text overlay. How can we have different images for mobile and desktop.
Thanks in advance.
Solved! Go to the solution
This is an accepted solution.
Hello,
The URL within the following code will replace the image in the specified area only on mobile devices. I've tested it in the browser, and it works. If you still can't do it, just let me know, and I'll assist you. If you have any other issues you can't solve, feel free to tag me, and I'll help whenever I have time between my own programming tasks.
@media only screen and (max-width: 971px) { .Aboutus-information.sec3 { background-image: url('https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg')!important; } }
Hello,
Manually, it can be done with JS + CSS, but if the theme already has such a feature, it's better to use that. If you can't do it, tag me, and I'll look into the issue!
@TerenceKEANE My theme customisation doesn’t have the feature, so I guess it has to be done manually.
Then could you please send me the full URL link of the page and the image you want to display on mobile devices? As far as I understand, you want to add a specific image for mobile devices?
@TerenceKEANE we use a DAWN 11.0 theme and I would like to have a different banner image on the main page for mobile. Can you help me out?
Thanks in advance!
Hello,
Yes, we can do that. If you can send me the full website link, a screenshot of the desired location on mobile, and the image you want as a link, I can help you. 😉
Terence..
This is an accepted solution.
Hello,
The URL within the following code will replace the image in the specified area only on mobile devices. I've tested it in the browser, and it works. If you still can't do it, just let me know, and I'll assist you. If you have any other issues you can't solve, feel free to tag me, and I'll help whenever I have time between my own programming tasks.
@media only screen and (max-width: 971px) { .Aboutus-information.sec3 { background-image: url('https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg')!important; } }
Thanks Terence for all your help and for working with me with great deal of patience in resolving this matter. It is working fine now.
Cheers!
just let me know, if u need anything 😉
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024