I have a slider which is hidden by 'display:none' when viewed on mobile phones. This slider contains our H1 tag. Is this bad practise? The H1 tag itself is not hidden, but the div containing the slider is.


1 Answer 1


The standard practice for showing h1 tags on large resolution screens (PC) while hiding h1 tags for mobile devices is to use CSS in a way similar to as follows:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
@media screen and (max-width: 850px) {   
h1 { font-size: 12px;
@media screen and (min-width: 850px) {   
h1 { font-size: 24px;

This allows you to put page keywords in h1 tags which still may be relevant to keyword targeting in search engines, while also limiting the size of the text when displayed on various screen sizes.

It's also considered fine SEO practice to display certain content to PC users that is not visible to mobile users and vice versa. So hiding the h1 tags is a potentially fine method, though you might prefer to change the font sizing instead as suggested with my method.

It's unlikely that you would get hit with a penalty for "hiding text" with display:none, though you never know. Websites used to stuff keywords in their pages with display:none and were penalized for it as a result. Googlebot should understand that you are simply trying to show this content to PC users but not to mobile users, but it's possible for the bot to misinterpret your intentions. As a result, I believe it's preferable to change the font-size when applicable instead of simply hiding the entire block of content.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.