Topic on Extension talk:MobileFrontend/Flow

In mobile view, the cells within tables don't take up the full width of the table, nor do the cells center themselves horizontally within the table, when the contents of the cells don't cause the cells to expand to their full potential width. The cells instead are aligned to the left of the table and leave a gap to the right, unless the text or contents of the cells cause the cells to expand to take up the full width of the mobile screen in which case the cells do take up the full width of the table as I would expect them to.

I am using basic wiki table code to create an "infobox" that is aligned to the right in desktop view and elegantly takes up 100% of the horizontal space in mobile view. Unfortunately, the cells within the table don't avail themselves of 100% of the width available to them, causing an unsightly off-center gappy look.

I'll attempt to post markup below

Details:

MediaWiki 1.31.6

PHP 7.2.30 (cgi-fcgi)

MobileFrontend 2.1.0

Example markup resulting in a mobile view table in which the cells don't expand to the full width of the table:

{| width=245px align=right style="background:#EEEEEE"

! Page Title |- align=center |

[[File: Page_Title_Illustration.png|300px|thumb|center|]]

Some text below the image |- |

'''Blah:''' blah

'''Blah 2:''' blahblah

'''Blah 3:''' blahblahblah |}>

Lacking an answer, I came up with a way to fix this myself. Posting this in case this helps anyone in the future.

Firstly, let's not do this infobox thing with tables; it isn't the most appropriate way to do structural elements anyway... and your Minerva and Mobile style sheets will mess up your tables. Let's do this with DIVs. Secondly, this requires defining some DIV classes that will be styled differently in Common.css than from Mobile.css so that you can have a full-width infobox in mobile in which the contents remain centered. Thirdly, it looks like the way MediaWiki does thumbnails doesn't like to play well inside "infobox" divs (or tables) like this when viewed on wider-screened mobile devices, such as tablets and phones in landscape (it'll stop center aligning and instead hang left of center after a certain width), so let's go ahead and wrap that image wikitext with yet another DIV with a class that's styled in mobile to make it actually stay centered irrespective of the containing infobox's width.

Markup for a right-aligned infobox containing a thumbnail image, a centered heading above the thumbnail, and a div below. Keep in mind you can clean up your page by relegating most of this markup to a template and calling that template in your article rather than having an article cluttered with markup:playing home to left-aligned content:

<div class="infoboxright" style="background-color: #EEEEEE; text-align: center;">

'''Heading Text'''

<div class="actuallycentered">[[File: Sample_Illustration.png|225px|thumb|center|Image description.]]</div>

<div class="infoboxbody" style="background-color: #EEEEEE; text-align: left; margin: 0 auto; padding: 2px 2px 2px 4px;">

Content.

</div>

</div>

For inclusion in MediaWiki:Common.css:

div.infoboxright {

   float: right;

   width: 270px;

}

div.actuallycentered {

   max-width: 320px;

   margin: 0 auto;

}

For inclusion in MediaWiki:Mobile.css:

div.infoboxright {

   width: 100%;

   margin: 0 auto;

}

div.actuallycentered {

   max-width: 320px;

   margin: 0 auto;

}