Opened 19 months ago

Closed 5 months 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


For the user profile:
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:

Change History (3)

#1 @viralsampat
16 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;


#2 @coffee2code
7 months ago

#6621 was marked as a duplicate.

#3 @coffee2code
5 months 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.