Opened 9 years ago

Closed 8 years ago

#685 closed defect (bug) (wontfix)

Need to responsive col-* classes throughout

Reported by: mcguive7's profile McGuive7 Owned by:
Milestone: Priority: normal
Component: General Keywords:


Column classes (e.g. col-10) are used throughout the .org site to layout content and sidebar areas, and possibly other elements as well. At present these col-* classes:

  1. Are styled with pixel width values, and
  2. Aren't responsive (no media queries)

I propose we:

  1. Switch to percentage values to allow for fluid scaling and prevent unexpected wrapping
  2. Move all CSS width definitions inside a min-width media query so that all columns are full-width below a certain breakpoint and then become a percentage of the full viewport above a certain width.

I'm happy to do this - it could be a pretty quick change in wp4.css - however I would first like some feedback on the following questions:

  1. Can anyone give me a good overview of where/how column classes are used throughout .org?
  2. I see that the forum does have some responsive CSS for columns in a separate stylesheet (forum-wp4.css) - is there a reason why this is separated out?

Also just noticed there's a bunch of specific nested col-* selectors (e.g. .col-10 .col-5) also with explicit widths. . .

I guess the other question is - is this worth cleaning up? Is there any interest in an overhaul to really clean things up (e.g. minimize selectors, move to all mobile first, make rule order consistent)? Might be possible to work through one site at a time. . .

New here so would love to know what the normal mode of operation is.

Change History (2)

This ticket was mentioned in Slack in #meta by ocean90. View the logs.

8 years ago

#2 @samuelsidler
8 years ago

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

@coffee2code made some changes to fix the .col styles in a practical sense. It doesn't make sense to fix them globally as it might break things. We should build it right from scratch when we redo the design.

Note: See TracTickets for help on using tickets.