Making WordPress.org

Opened 15 months ago

Closed 6 weeks ago

#6604 closed defect (bug) (fixed)

Mobile screen navigation issue due to padding in the content tabs

Reported by: krunal265's profile krunal265 Owned by:
Milestone: Priority: high
Component: Profiles Keywords: needs-patch
Cc:

Description

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

Change History (3)

#1 @viralsampat
12 months ago

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,

#2 @coffee2code
3 months ago

#6621 was marked as a duplicate.

#3 @coffee2code
6 weeks ago

  • Resolution set to fixed
  • Status changed from new to closed

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;
}

Note: See TracTickets for help on using tickets.