Text is hidden in responsive and there is no consistency with date text.

[Himshekhar07]

The date text on this page https://wordpress.org/news/category/events/ is page is not consistent and also hidden in the responsive design. Additionally, the date should be consistently displayed in the same location on the page, regardless of screen size or the device used to access the page. This helps to ensure that users can easily locate and understand the date information.

I am attaching the video with the solution: https://share.cleanshot.com/59SWJ673hmkxKHLwBMYj

[KAJALwp]

Hello @Himshekhar07 ,

Thanks for reporting this issue!

I have checked an issue and also able to reproduce it.

Adding the following CSS will solve this issue:

@media screen and (max-width:768px) { 
     body.category-events .wp-block-post .wp-block-wporg-event-year {
          bottom: 0;
     }
 }

Thanks.

[iandunn]

That was an intentional design choice, rather than a layout bug. Here's the mockup:

https://www.figma.com/file/O9I8Jl7kaUMTX39LlRGbGO/News?node-id=4865%3A25211&t=Z6n5kG2xNQJzz71s-4

I can see your point about the location being confusing, though. I think most users would expect the year to act as a sort of header, and appear before the posts that it is connected to, rather than after.

cc @beafialho

[iandunn]

399 discusses the same issue, but with the Releases page.

[jasmussen]

The cropped text which moves upwards on hover is indeed an intentional design choice, I happen to like it a lot, making the year-separation into a decorative element. I suspect since it’s January, the element becomes extra visible, making it seem like a bigger part of the page than it is most of the year.

If it’s problematic on mobile, we could make the element focusable (tabindex="-1") so that you can tap it to move it upwards like it does on hover on desktop. What do you think?

[ryelle]

If it’s problematic on mobile, we could make the element focusable (tabindex="-1") so that you can tap it to move it upwards like it does on hover on desktop. What do you think?

Since it is a decorative element, making it focusable could be confusing — clicking it doesn't trigger any action, just a visual change, so for a screen reader user it's not clear.

Maybe on mobile it would be okay to just remove the cutoff style, like the comment above suggests:

Before	After

[jasmussen]

In being decorative, I'd honestly rather remove the hover style entirely and keep it cropped and decorative. It is more of an illustration, after all. There's an actual date attached to each post. Potentially could use something like this:

@media (hover: none) {
    ...
}