Hello Shopify Community,
Does anyone know how we can create seperate versions of a feature for mobile and desktop editions of our page? We tried to do this from Online Store > Themes > Customise and chose mobile from the top right corner, but the changes we applied to the HTML code for the mobile version, also changed the desktop one. More specifically, we want to change the dimensions that a YouTube video window takes in the mobile version. While on desktop it takes a normal space for such use, on mobile it gets extremely long and creates an unfriendly user experience. Any advise will be appreciated.
Thank you for your time,
Jacques Hermes Team
When writing css for mobile you should put your styles inside of this:
@media all and (max-width: 750px) {
//your styles
}
And then it’ll apply only for mobile screens.
@JH_TECH
can you please try this code Desktop and Mobile
Hello Marina,
Thank you for your reply. We found out how to fix this problem by checking this YouTube video:
https://www.youtube.com/watch?v=9YffrCViTVk
the css code should be added to Assets>theme.css.liquid
We recommend anyone with the same problem that is reading this to check this solution because it is fast and easy.
Thank you for your time,
Jacques Hermes Team
Hello Ketan,
Thank you for your reply. We found out how to fix this problem by checking this YouTube video:
https://www.youtube.com/watch?v=9YffrCViTVk
the css code should be added to Assets>theme.css.liquid
We recommend anyone with the same problem that is reading this to check this solution because it is fast and easy.
Thank you for your time,
Jacques Hermes Team
