Anchor links on not working on disabled sections

Hey Janson,

I've seen this type of thing before and yes, I'd imagine that having multiple sections with the same anchor links would be the problem - since CSS IDs are supposed to be unique on the page, the browser will typically only look at the first one (e.g. the desktop section) and ignore any subsequent ones.

There are a few possible workarounds:

If the two sections differ only in their row content, you could combine them into one section and enable / disable the rows on the different device widths, leaving the main section visible at all times with the ID set on it. That way you'd always be linking to the same section.

If the two sections differ sufficiently, then instead of disabling the desktop section, you could style it to be, for example, 1px high. Disable the rows it contains on mobile and set the height / margin / padding on mobile such that it takes up very little vertical height. Ideally also set it to have the same background color as a neighboring section. That way it is still displayed in the page (and hence can be linked to using the anchor link) but doesn't have a noticeable visual impact. Again, just use this one section for the anchor linking.

If you are just linking to the anchors from buttons / links from a small number of places (on the same site), you could give the mobile and desktop versions of the section different CSS IDs and then create mobile versions of these buttons / links which link to the mobile version of the section. Then hide / show the mobile / desktop versions of the buttons / links as appropriate. It's probably a bit of a messier solution compared to the ones above though.

I think other than that you'd have to look at custom code to either switch the section IDs or link targets depending on the device width.