Google Chrome validation and responsive design

[toplisek]

I have validated some sites and it seems Google Chrome validates two ID’s as false signal.
Is this an issue as responsive design can have class hidden all and it should be signal as true when validated. If you hide code from lower resolution it should be detected signal as OK.

An example: if you have two forms with the same ID, it should be validated as OK (true) as it is hidden inside mobile devices and seen only on larger resolution.

Need help as the same form can be designed for a mobile device and another for higher resolution.

If this is true, we have to create only one form and make it responsive design.

[coothead]

Hi there toplisek,

the id selector is unique and may only be used once in a document.

I would suggest that you use one form and then employ media queries
to restyle it for smaller page widths.

coothead

[PaulOB]

I’d echo the comments by @coothead above.

You always want to avoid duplicating content so its best to style the component to suit all cases.

If you can’t avoid duplicating content for some reason then don’t use the same ids.

[toplisek]

Thank you for the message!