Design/UX #23708
openAnchor links have incorrect spacing on mobile
0%
Description
Since there is no header on mobile for http://khatchad.commons.gc.cuny.edu, clicking on an anchor link on mobile doesn't move the page down far enough. On desktop, the anchor is right below the header bar. On mobile, however, there's space.
May be related to #23272.
Files
.png){kind=link}
Updated by Raymond Hoh 4 days ago
- Category name set to WordPress Themes
- Status changed from New to Reporter Feedback
- Target version set to Not tracked
Hi Raffi,
Previously, you added some custom CSS to offset the anchor link (see #20431), but that leaked over to mobile devices, which doesn't display the WP Toolbar.
I've just added some custom CSS to remove the scroll-padding-top CSS declaration used for the anchor offset at <= 600px, which should fix the offset on mobile devices. Can you give this a try and see if that fixes the problem?
Updated by Raffi Khatchadourian 4 days ago
Hi Ray. Unfortunately, it didn't work. I still see space between the anchor and the top of the page. It works great on desktop.
I would think that this isn't specific to my site, correct? Wouldn't any site that uses anchor links have this problem? Or, is it something to do with the theme I have chosen? Thanks again!
Updated by Raffi Khatchadourian 4 days ago
Actually, http://commons.gc.cuny.edu has this problem. Please compare https://commons.gc.cuny.edu/#section-groups between desktop and mobile. You'll see a difference in spacing there as well. It's not as bad as mine, because my anchor links are much closer to the top of the page.
Updated by Raffi Khatchadourian 4 days ago
- Subject changed from Anchor links have incorrect location on mobile to Anchor links have incorrect spacing on mobile
Updated by Raffi Khatchadourian 4 days ago
- File commons.gc.cuny.edu_.png commons.gc.cuny.edu_.png added
- File commons.gc.cuny.edu_(Pixel 7).png commons.gc.cuny.edu_(Pixel 7).png added
Well, I took two screenshots, and now I'm unsure. At first, I thought the "More Site Activity" link on mobile shouldn't be shown because "Groups" is where the anchor is. But, now I realize that this link seems to be moved from the right to the top on the mobile layout. I've attached one screenshot for mobile and one for desktop.
I guess my request would be to have my site work similarly to the main site, but perhaps the behavior I'm seeing on my site is specific to my theme.
Updated by Raymond Hoh 4 days ago
- File Edge Mobile.png Edge Mobile.png added
- File Firefox Mobile.png Firefox Mobile.png added
Yes, there are some anchor offset problems on the main site, but for your site, there shouldn't be the anchor offset problem anymore.
I forgot to mention that if you tried this when logged out, you would have needed to purge the Litespeed Cache in the WP admin dashboard in order to see the results. I've attached two screenshots of what the offset looks like currently in Firefox and Edge on mobile. (The Edge one uses a dark mode extension, so that's why it looks different.)
Updated by Raffi Khatchadourian 4 days ago
Raymond Hoh wrote in #note-6:
Yes, there are some anchor offset problems on the main site, but for your site, there shouldn't be the anchor offset problem anymore.
I also found a similar problem on https://psych101fall24.commons.gc.cuny.edu/syllabus/#course-overview. On mobile, it also doesn't move down far enough (I'd argue that on desktop, it moves down a little too far). So, I believe that this problem isn't specific to my site but rather the presence (and absence) of the navigation top bar.
I forgot to mention that if you tried this when logged out, you would have needed to purge the Litespeed Cache in the WP admin dashboard in order to see the results. I've attached two screenshots of what the offset looks like currently in Firefox and Edge on mobile. (The Edge one uses a dark mode extension, so that's why it looks different.)
Did you purge the cache? If so, it seems to worked. Thanks! But, I'll keep this open to hear back from you about the generality of the issue.