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 7 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 6 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 6 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 6 days ago
- Subject changed from Anchor links have incorrect location on mobile to Anchor links have incorrect spacing on mobile
Updated by Raffi Khatchadourian 6 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 6 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 6 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.
Updated by Raffi Khatchadourian 2 days ago
Actually, I've just noticed that there is a class on <body/> called admin-bar that would seem suitable to detect this situation. Currently, the criteria is a "screen" characteristic, but, really, the problem arises due to the bar (regardless of platform), i.e., whether the bar is present or not.
Updated by Raffi Khatchadourian 2 days ago
Ah, nevermind. That class is also present on mobile.
Updated by Raymond Hoh 2 days ago
I also found a similar problem on https://psych101fall24.commons.gc.cuny.edu/syllabus/#course-overview.
This is a sitewide problem as the CSS fixes on your site haven't been added to all sites. I just added the CSS fix from your site to the psych101fall24 site and it looks like it is working now.
Did you purge the cache?
I did.
But, I'll keep this open to hear back from you about the generality of the issue.
I think adding the CSS fix that I added on your site to all sites would address the majority of the anchor issues, but this wouldn't fix the few sites that have added a sticky header underneath the WP admin bar.
Updated by Raffi Khatchadourian about 5 hours ago
Hi Ray,
Today, I noticed that the anchor links weren't working on mobile. I found that these lines were removed from the "Simple" CSS of my site:
Was that part of this fix? I added them back, and now they are again working on desktop (and mobile).
Updated by Raymond Hoh about 5 hours ago
Apologies, Raffi. I was doing some testing with seeing if that snippet was necessary since it looked like WordPress did add a scroll-padding-top CSS declaration to their own admin bar CSS. Since the Commons admin bar is larger by default, that snippet is indeed necessary.
I will add a fix for all sites in the next maintenance release based on our testing.