how to hide text without seo penalty

[unwashed potato!]

currently trying to redo parts of my site, and one thing i've realised is i hide sections of text/content with css display:none and wondered if this may cause an seo issue and how to avoid it.

the reason i do this is because of the design change as the web page is viewed on different sized screens.

for instance, on big screens, i have a big welcome image, with bullet points on it, quote buttons, big title etc, but on mobile view, i hid some of the bullet points, hide the title, just show the quote button etc.

i also have it within the main content, on big screens i have larger paragraphs, but on mobile view, it'll remove sentences etc to bring down the size.

will google see this as keyword hiding and penalise my site?

though i'm redoing the design, here is the current active version so you can see what i mean.

https://www.mayercleaning.co.uk/services/moving-cleaning/woking.php

 

[Steviepunk]

I noticed you IMG tags for the banner have no ALT parameter set. First, I believe you need at least specify that parameter otherwise it would be an instant fail on accessibility tests. However, setting your bullet point text as the ALT text on the images might be a way to minimise any SEO hit if you need to hide the text due to spacing.

I've not been keeping up on SEO lately, but I believe that you won't be penalised for the hidden text as Google understands responsive layouts and the text is visible on other dimensions - however on mobile search you would be scored on the basis of the text not being there (ie. only scored on what it can see, not penalised for what it can't)

 

[visibleman]

https://developers.google.com/search/docs/advanced/guidelines/hidden-text-links

As long as you're not using it for nefarious reasons then you'll be fine; they can manually intervene and checks sites any way. As @Steviepunk says though, you need to use ALT text where you can and you should note that Google is 'mobile-first' and that's how they initially render the page. Therefore if that hidden text/information isn't "fluff" and is important, then you should find a way of displaying that within the (mobile) rendered layout.

Edit - Just to add, the quote button disappears between 581-680px wide.

 

[Dup]

display:none shouldn't have an impact these days.

I would look at breaking it down content into an accordion on mobile. Have a H1 and first paragraph, then every subsequent heading be an accordion you click to reveal the text. Keeps infothe same for all users and makes it much easier to read and maintain.

 

[unwashed potato!]

OK thanks guys. Will take the note and add alt text where appropriate