Google and responsive content in display:none CSS

[shloy23-294584]

I’m building a WordPress site with Visual Composer and I’ve hit a point where I need to show a totally different section on a mobile compared to a desktop/tablet.

My issue/question comes from the fact that both mobile and desktop rows will have the same content as well as H1/H2/H3 tags.

From inspecting the elements I see the mobile only rows are hidden until the page size shrinks through being set to 'display: none' in the CSS (standard visual composer way of handling width & responsiveness)

How will Google see this in terms of SEO? I don’t want to come across as if I’m cloaking text and H1 tags on the page

(I have emailed the visual composer support but wanted to get an external opinion)

[Highland]

There's nothing wrong with hidden elements as long as they serve some purpose other than to game Google. A hidden div with tons of content that will never be seen by a end user is spam. A hidden div that requires you to click on something to see it is not spam.

Matt Cutts talked about the issue a couple of years ago

[KristinaKledzik]

Hi Ashley,

To clarify, this is just a section of the page, right? The page will still have essentially the same information for both mobile and desktop users, but tailored to their devices? It's fine to remove or change up inconsequential elements of the page. Webmasters have had to do this from the start, for ads, complicated navigation, and other page elements that are helpful on a desktop page but cluttered on a phone screen.

If this content is the majority of the page, though, and sends a different message, you should probably create a separate page for mobile visitors. If this is the case, let me know and I can follow up with more specific recommendations.

Good luck!

Kristina