Andrew Thomas Education Posted December 5, 2017 Share Posted December 5, 2017 I am a complete beginner and am trying to learn HTML at the same time as modifying an existing website to be mobile friendly @media only screen and (max-width: 500px) { body { background-color: lightblue; } } @media only screen and (min-width: 500px) { body { background-color: coral; } } </style> </head> <body> <div id="slSection"> <umbraco:Macro splashMedia="[#splashMedia]" Alias="SplashScreenSlideshow1" runat="server"></umbraco:Macro> </div> Above is a code fragmant I need help with, as a test I haveset the page to change background colour from lightblue to corel when viewed on a smaller screen and this works. Further down the code calls a script called SplashScreenSlideshow1 My problem is I would like call a different script based on the size of the viewing screen. How do I define a script name based on the screen size? Any help gratefully received Thanks Andrew Link to comment Share on other sites More sharing options...
Ingolme Posted December 5, 2017 Share Posted December 5, 2017 The style element only changes the appearance of the page, not the data or content. You will need to write Javascript code to check the innerWidth property of the window when the page is loaded or resized. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now