WordPress.org

Making WordPress.org

Opened 2 years ago

Last modified 3 weeks ago

#3118 new defect

Trac: Improve mobile styling on report pages

Reported by: mitraval192 Owned by:
Milestone: Priority: normal
Component: Trac Keywords:
Cc:

Description

I found the "https://meta.trac.wordpress.org" site is not looking properly on the mobile device.

Attachments (2)

meta.trac.wordpress.org.png (31.2 KB) - added by mitraval192 2 years ago.
Displaying white space on the right side of the page.
responsive-table.jpg (51.6 KB) - added by birgire 2 years ago.
Example of a responsive trac table

Download all attachments as: .zip

Change History (8)

@mitraval192
2 years ago

Displaying white space on the right side of the page.

#1 @SergeyBiryukov
2 years ago

  • Component changed from General to Trac

#2 @mitraval192
2 years ago

Regarding this issue, we need to add one div on above the "<table class="listing tickets">".

and add below CSS.

div.CLASS_NAME { 
   width: auto;
   overflow: scroll;
}
Last edited 2 years ago by mitraval192 (previous) (diff)

#3 @SergeyBiryukov
2 years ago

  • Summary changed from Mobile Responsive issue to Trac: Improve mobile styling on report pages

@birgire
2 years ago

Example of a responsive trac table

#5 @birgire
2 years ago

In responsive-table.jpg we have an example of a responsive trac table, where each column has full width:

table.listing th, table.listing td {
    display: block;
}


where we would wrap this in a css mobile media query.

This would also need extra labels, only visible on mobile, for the column names in each row.

Note: See TracTickets for help on using tickets.