Introduction
Today we will learn how to hide a specific DIV element when the site is viewed on a mobile device. I hope you will like this.
Background
For the past few days I was working on my personal website. Suddenly I encountered an issue with my site's footer. It was bothersome when the site was viewed in a mobile device. So I began working on this issue and succeeded in resolving it. So here I will share the fix you need to implement on your website.
Please find this article in my
blog.
Using the code
Previously, whenever I viewed my website in a mobile, I got a view as given in the following image that made my site's reputation go down. And as you all know these days we are seeing everything on mobile devices. So it is our responsibility to make our website look better on mobile devices. What I will be doing is, whenever a user views my site on a mobile, I will just hide my footer div that contains social plugins.
Here I will share the CSS file you need to implement.
- @media only screen and (max-width: 480px) {
- body {
- max-width: 480px;
- }
- .myfootershare {
- display: none
- }
- }
In the preceding CSS, we are checking the width of the screen using the @media query in CSS.
- @media only screen and (max-width: 480px)
So when the screen size is below 480 px, we will just hide the element (with class name myfootershare).
Once you include this in your CSS, you can see the output as follows on the mobile.
That is all for the day. I hope you enjoyed reading.
Please share your feedback with me.