Jump to content
Andrew Thomas Education

Script definition in header

Recommended Posts

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


    
   

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×