Mobile screen navigation issue due to padding in the content tabs

[krunal265]

For the user profile: ​https://profiles.wordpress.org/krunal265
The padding on the mobile screen makes it difficult to navigate between the content tabs. A profile with more than 3 content tabs can be difficult to navigate between the active tab and the upper tab.

The top padding needs to be removed for the screen of 767px.

Video URL for better understanding: ​https://www.awesomescreenshot.com/video/12883004?key=61d89e35b0d1d30a62003a8900fcd52e

[viralsampat]

Hello @krunal265

I have checked the above-mentioned issue and resolved it.

I haven't a WordPress profile org clone, So here, I have added its solution.

@media screen and (max-width: 767px)
#content-tabs ul li {
    display: inline-block;
    padding: 0px 16px;
}

Thanks,

[coffee2code]

#6621 was marked as a duplicate.

[coffee2code]

Fixed in [21534-dotorg]:

Improve responsive display of tabs when appearing horizontally and wrapping.

Props krunal265, viralsampat, coffee2code.
Fixes #6604.

The ultimate solution was to instead display the links within a flexbox:

#content-tabs ul {
border: 1px solid #EEEEEE;
padding: 10px 0;
+ display: flex;
+ flex-flow: row wrap;
}