in Arabic wikipedia we resolved the problem on Mobile browsers by style( table.infobox td{padding: 2px } and (.infobox table { display: table})

Sounds like the right solution for the mobile site. We encourage editors to address these problems via Extension:TemplateStyles

This is in part because the templates use a table inside of a table (infobox). The default CSS doesn't account for that. I also agree that this should be fixed using TemplateStyles on the local wiki.

Sounds like the right solution for the mobile site. We encourage editors to address these problems via Extension:TemplateStyles

Exactly @Jdlrobson , TemplateStyles is excellent solution, but most languages do not use it, How can motivate other languages to use it in infobox ? or for example Is it possible to add style to skin more personalized to solve the problem for those who do not use it:
@media screen and (max-width: 720px) {.infobox table { display: table}}`?. Thank you

In T254669#6204872, @TheDJ wrote:

This is in part because the templates use a table inside of a table (infobox). The default CSS doesn't account for that. I also agree that this should be fixed using TemplateStyles on the local wiki.

@TheDJ but for example in french wikipedia in (Barack Obama) article here , when resize the window for under 720px, Note that (tbody) element does not extend to the full width although the template don't use a table inside of a table. Thank you for your comment.

@Charlotte What's your priority on this for Android?

In T254669#6271806, @LGoto wrote:

@Charlotte What's your priority on this for Android?

I'd certainly like to get this fixed within the next month. From what I can tell by looking at the provided links it doesn't prevent readers entirely from seeing/using the infobox, so it's not an unbreak now status, but usability problems like this shouldn't be allowed to persist.

In T254669#6205691, @Omar_Ghrida wrote:

In T254669#6204872, @TheDJ wrote:

This is in part because the templates use a table inside of a table (infobox). The default CSS doesn't account for that. I also agree that this should be fixed using TemplateStyles on the local wiki.

@TheDJ but for example in french wikipedia in (Barack Obama) article here , when resize the window for under 720px, Note that (tbody) element does not extend to the full width although the template don't use a table inside of a table. Thank you for your comment.

That is because that template doesn't use the infobox class, but infobox_v2, which the skins know nothing about. Technically, it's not an infobox, its something that looks a little bit like an infobox.

There is no straight jacket that works as a general solution when the problem is so multi faceted. The problem is that all this content is years old and designed desktop only and that means it will NEVER be perfectly mobile friendly until someone fixes that specific code. This is the downside to letting every single community do whatever they want. They also need to take responsibility for maintaining and improving such things beyond their own screen.

Specifically, it seems that the fr.wp community is aware that this is required for the software to recognize what an infobox is (aka semantic class, not just styling) and still chose not to fix it. https://fr.wikipedia.org/wiki/Discussion_Projet:Infobox/V3#Ajout_de_la_classe_infobox_en_début_de_class="
So a problem like this is THEIR problem to fix.

Moving Template Issues related tasks to the tracking column, please ping us if you think there is anything else that we should act on.