In my handlebars HTML template, I have a partial view that includes different pieces of content for desktop and mobile. I use different CSS classes to hide and show these elements accordingly.
<div class='hideOnMobile showOnDesktop'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra HTML for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra HTML for Mobile presentations -->
</div>
My CSS primarily involves using media queries to toggle the visibility of elements:
@media only screen and (min-width: 420px) {
.showOnMobile { display: block; }
.hideOnMobile { display: none; }
}
@media only screen and (min-width: 1050px) {
.showOnDesktop { display: block; }
.hideOnDesktop { display: none; }
}
The CSS is functioning as intended. However, I am facing an issue when trying to implement deep linking on a specific page
http://example.org/page.html#manuals<a> element. Despite encountering limitations, I'm interested in exploring potential workarounds rather than resorting to JavaScript. Any suggestions would be greatly appreciated. Thank you.