Wikimedia Bugzilla is closed!

Any particular examples?

The [[Portal:Literature]] page noted on bug 22187 seems to actually fit on screen, it just... shouldn't. ;) The same problem occurs on desktop browsers if the window is narrow.

Proper fix is to fix the styles; there's no magic universal style for 'portals', they're all made individually and some format better than others.

The problem is hardcoded stuff like this:


<div style="float:left; width:60%;"> <!-- This width add to the margin below to equal 99%-->

{{Random portal component|max=22|header=''Selected article''|subpage=Featured article|seed=53}}

{{Random portal component|max=20|header=''Selected picture''|subpage=Featured picture|seed=83}}

</div>

<div style="float:right; width:39%"> <!-- This margin should be right of the above -->


These need to, well, not assume that the window is big enough that 60% and 39% of it will be suitable widths for content.

Probably setting up some global styles for "two-column" content that automatically devolves to single-column on narrow screens would be a good help...

This seems to work nicely...

https://en.wikipedia.org/wiki/User:Brion_VIBBER/vector.css

^ added some test styles:

/* On wide screens, show these as two columns */
 
.portal-column-left {
  float: left;
  width: 60%;
}
 
.portal-column-right {
  float: right;
  width: 37%;
}
 
@media only screen and (max-width: 720px) {
  /* Decouple the columns on narrow screens */
  .portal-column-left, .portal-column-right {
    float: inherit;
    width: inherit;
  }
}


and used those instead of hardcoded left/right/width on http://en.wikipedia.org/wiki/Portal:Literature/Mobile_redesign_attempt

With the styles active, on a regular browser this shows up with the double columns, until you make the browser window narrower than 720px at which point it switched to single-column. The mobile view doesn't get the styles at all so shows the single column, but should do the same if it gets the styles, at least on decent browsers.

Note that I don't think we can use CSS3 media queries on inline style elements, so these'd have to be added to a global stylesheet on the site.

Note that the section near the bottom of the page with a lot of icons still needs adjustment, as it's a big table -- it should probably be a bunch of floats or inline-block elements that can rearrange themselves to fit.

Created attachment 9632 [details]
Screenshot of enwiki Portal:Literature on current mobile view

Some sections are too big for the tiny columns they've been placed into.

Created attachment 9634 [details]
Same section without columns

Same section on http://en.m.wikipedia.org/wiki/Portal:Literature/Mobile_redesign_attempt with the columns disabled

Stuck a quick request for comments or objections on:

https://en.wikipedia.org/wiki/MediaWiki_talk:Common.css#Portal_column_width_vs_narrow_and_mobile_screens

If no objection, will add the styles to the Common.css on enwiki and slip them into some of the portal pages to try them out.


Note that wide tables and images do seem to trigger horizontal scrolling (such as the icon table at the end of that literature portal)

Also dropping a note on https://en.wikipedia.org/wiki/Wikipedia_talk:WikiProject_Portals#Style_tweaks_for_small_and_mobile_screens

Created attachment 9637 [details]
Screenshot of improved related-portals links

Working on redoing the hardcoded table links in a more modern way.

* Uses existing templates (From template:portal etc) for grabbing the icons
* wraps whole thing in a template, and each item is from another template -- easier to override and change in future
* uses floats with a fixed size instead of tables, so they fit into whatever space is given for them
* fits two columns on iPhone

Additional note: the horizontal scrolling where needed works fine in Safari on iOS 5, but doesn't on Android 2.3.6 (Nexus 1).

Will see if it needs some customized styles or something...

To confirm -- Phil, was this bug meant to complain about wide things causing annoying horizontal scrolling? (All the work above is to fix wide things.)

Or to complain that horizontal scrolling *did not work* when there were wide things on Android browser? If so, that's because the styles have 'overflow-x: hidden' on the body tag, disabling horizontal scrolling.

I'm removing that in r105582 on trunk, please indicate if there's any problem with that.

Closing this bug out -- bug 30887 is specifically about fixing portals, and further talk on the above stuff should go there.

Seeing the scrolling problem in Android app with Arabic pages, possibly all RTL languages. Here is an example:

http://ar.m.wikipedia.org/wiki/%D8%A7%D9%84%D8%AF%D9%82%D9%87%D9%84%D9%8A%D8%A9

Also Android browser on nexus One 2.3.6.

Last section on that page when opened has a better example of the problem.

Since this is specific to RTL this should probably be a separate bug.

Broke the RTL-specific bit out to bug 33688, closing out the general issue.