hide elements on mobile version using css

problem

You designed a web page and a particular element needs to appear only when the user visits the page from their Desktop. If the user visits the page from a smaller device, like a mobile or tablet, the element needs to be hidden.

SOLUTION

CSS has a feature called media rules. Media rules allow us to accomplish this task. We can use a rule that specify how wide the screen is and apply some CSS based on that logic. For this example, a small screen with width of 600px will act as a device to hide the item.

So the code will be as follows:

hide_on_mobile.html

				
					@media only screen and (max-width: 600px) {
    /*you CSS here*/
}

The code above says to the web browser to check the media (device) and if it’s screen and the width less than 600px, then apply the CSS rules enclosed by the curly brackets. A good approach to test that is working is to change the background color.

Let’s add the CSS to change background color to yellow.

hide_on_mobile.html

				
					@media only screen and (max-width: 600px) {
        body {
        background-color: yellow;
    }
}

Let’s suppose an empty HTML file as follows:

hide_on_mobile.html

				
					<html> 
	<head>
		<style> 
			@media only screen and (max-width: 600px) {
				body {
				 background-color: yellow; 
				}
			} 
		</style>
	<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-de481ab1-d283-4a2d-92a8-6d8076b11eb0: url('https://programmerabroad.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-de481ab1-d283-4a2d-92a8-6d8076b11eb0: url('https:\/\/programmerabroad.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"de481ab1-d283-4a2d-92a8-6d8076b11eb0","url":"https:\/\/programmerabroad.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>

	<body> 

	</body> 
</html>

running

Now, if I open that to the a web browser I would expect to have the background page to white at the beginning when the window is full size. While I resize the page to shrink, less than 600px then the yellow should be applied.

output

We can see when the window resizes and gets smaller than 600px, the background color changes. Now, let’s add an item to the body and hide it when the window resizes.

For example, let’s add a header message to the <body>

				
					<body>
    <h1>
        This will disappear when screen < 600px
    <h1>
</body>

Let’s update the media rule to hide the header element.

				
					h1 {
    display: none;
}

The complete code looks as follows:

hide_on_mobile_complete.html

				
					<html>
	<head>
		<style>
		    @media only screen and (max-width: 600px) {
				body {
					background-color: yellow;
				}
				h1 {
					display: none;
				}
			}
		</style>
	<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-de481ab1-d283-4a2d-92a8-6d8076b11eb0: url('https://programmerabroad.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-de481ab1-d283-4a2d-92a8-6d8076b11eb0: url('https:\/\/programmerabroad.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"de481ab1-d283-4a2d-92a8-6d8076b11eb0","url":"https:\/\/programmerabroad.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
	<body>
		<h1>This will disappear when screen < 600px<h1>
	</body>
</html>

running

Let’s open it in the web browser and resize it once again:

output

It works!

conclusion

In this post we saw how to apply CSS media rules and hide an element when a screen has less than 600px width. Check out other posts in CSS. You can download the example file below.

See it live: media_rules

Share it!

Ellion

Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪

Tagged responsive