Disappearing header image

Need to remove something from your webpage when it's being viewed with smaller devices? Here, use the CSS below and embed it into your Google Sites web page. (I used an example image from unsplash.com, you'll have to replace it with whatever element it is you want to hide.

The Embedded HTML and CSS

Explanation to follow...

<style> .dis-header{

     color: #ffffff;

     text-align: center;

     width: 100%;

     height: 100%;

     background-image: url("https://images.unsplash.com/photo-1541701494587-cb58502866ab?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-.2.1&auto=format&fit=crop&w=1470&q=80");

}

 @media screen and (max-width: 600px) {

    .dis-header{

        display: none;

    }

}

 </style> <div class="dis-header"><h2>This image will disappear on smaller screens</h2></div>