Duplicate H1 on single page for mobile and desktop

[Cells4Life]

I have a responsive site and whilst this works and is liked by google from a user perspective the pages could look better on mobile.

I have a wordpress site and use the Divi Builder with elegant themes and have developed a separate page header for mobile that uses a manipulated background image and smaller H1 font size.  When crawling the site two H1s can be detected on the same page - they are exactly the same words and only one will show according to device.  However, I need to know if this will cause me a problem with google and SEO.

As the mobile changes are not just font size but also adaptations to some visual elements it is not something I can simply alter in the CSS.

Would appreciate some input as to whether this is a problem or not

[KristinaKledzik]

Hey Ryzippy,

Google really doesn't want to penalize site owners for making web design decisions without taking their crawler into account, so I don't think there will be a problem. That said, I'd recommend that you upload the new design to a test group first, just in case.

This is not a risk-free solution, though, so I'd also recommend that you push back on your web developer. Is there really no way to use the same H1 for both the mobile and desktop design? This is exactly what responsive design is for, to use the same HTML elements, but different CSS based on the screen width.

Anyway, good luck, and check back in here to let other SEOs know if using multiple H1s will cause a problem!

Best,

Kristina