Unable to apply media specific styling to the error page that appears when Javascript is Disabled

28 Views Asked by Kimaya At 23 September 2021 at 18:09

I have a website and I want to add a custom error page when javascript is disabled. I added a component inside inside _document.js

<body>
    <noscript>
        <ErrorPage />
    </noscript>
</body>

Then that page is defined like this

function ErrorPage() {

    const requiredMsg = 'Javascript Required'
    const errorText = 'We’re sorry, but the page does not work without JavaScript enabled. Please enable JavaScript on your browser.'

    return (
        <div style={{ width: '100%', textAlign: 'center' }} >
            <img style={{ width: '100%' }} src={ 'img.svg' } />
            <Typography component='h1' style={{ fontFamily: 'lato, sans-serif', color: '#1074C3' }}>{requiredMsg}</Typography>
        </div>
    )
}

export default ErrorPage

It looks good, but I need to add some media specific styling and elements to the page. Like it needs to take up entire space in mobile, while in desktop, it should just occupy the middle 200 px height, and rest should have a faded background. How is that possible? Can this be achieved?

Original Q&A

There are 1 best solutions below

Kimaya On 23 September 2021 at 19:33

I was able to achieve this by placing the styles within inside _document

 <Html>
                <noscript>
                    <style>{`
                        div.errorPage {
                            background-color: rgba(0,0,0,0.3);
                        }
                       
                        /* This is mobile */
                        @media (max-width:600px) {
                            div.errorPage {
                                background-color: none;
                                width: 100%;
                                text-align: center;
                                height: auto;
                            }
                        }
                    `}</style>
                </noscript>

Unable to apply media specific styling to the error page that appears when Javascript is Disabled

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in NEXT.JS

Related Questions in NOSCRIPT

Trending Questions

Popular # Hahtags

Popular Questions