Page MenuHomePhabricator

Homepage: mobile start module text too close
Closed, DeclinedPublic

Description

In the screenshot from the mobile homepage below, I see that the text of "Email added" and "Learn to edit" are so close together that they look one phrase.

@Cntlsn -- should there be more space between these words?

Event Timeline

Etonkovidova added a comment.EditedJun 17 2019, 7:24 AM

@Mmiller - did you see the issue on a real device or in browser mobile emulator? I saw it only in the emulator and only for iOS devices:

@Etonkovidova -- I saw it on a real iPhone 6S running iOS 12.2 and Safari 12.1.

@Etonkovidova -- I saw it on a real iPhone 6S running iOS 12.2 and Safari 12.1.

Yes, exactly the device I do testing. The labels are wrapped - interesting, what might affect your display?

One thing to check is to use private browsing mode, as non-private browsing mode can cache the HTML, JS and CSS pretty aggressively.

I tried it in private browsing mode and still see the same issue:

@kostajh -- could you give us a feel for whether a lot of users are likely going to experience this, or a few? One of the considerations is that Czech and Korean are both different lengths than English, and I don't see the problem with those languages on my device. Trying to get a sense of whether this is something we should address in the near term or the medium term.

MMiller_WMF moved this task from Inbox to Upcoming Work on the Growth-Team board.Jun 18 2019, 3:52 PM

@kostajh What about setting a little left and right padding to the h3 to avoid potential future issues in general?

Something like

.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module > h3 {
    ...
    padding: 0 .2em;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module > h3:first-of-type {
    padding-left: 0;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module > h3:last-of-type {
    padding-right: 0;
}
Cntlsn removed Cntlsn as the assignee of this task.Jun 25 2019, 12:22 PM
Cntlsn removed a project: Growth Design.
nray moved this task from Needs triage to Triaged on the Mobile board.Jul 1 2019, 5:55 PM
Cntlsn added a comment.Jul 3 2019, 4:48 PM

This could be a duplicate of T227109
Or if we want to keep em separated, then there is some discussion about this in the conversation of T227109

MMiller_WMF closed this task as Declined.Jul 3 2019, 5:01 PM

Closing, because I merged this with T227109.