Portability

can someone make for me or help/guide me how to make infobox like wikipedia infobox of battle

I tried to copy text and there was sth about bad about that i made sth wrong in template and i tried once more - the text was just on different background but there was only letters.

Im sitting and searching 12h and im done.....

Mabye im stupid (it can be true) cause its my first time sitting with infoboxes and sourcecode (sry for my bad Eng)

*Note: Sorry if this is considered a duplicate request. I posted this through the mentoring request form some time ago, but it appears as though it possibly isn't being monitored. Meanwhile the wiki is still experiencing this issue on mobile devices.

I am wondering if someone could possibly assist with the implementation of template wrappers on Minecraft Wiki. The affected templates are: Template:ItemSprite, Template:BlockSprite/positions (and related templates)

Problem:
On mobile devices, the entire raster image is pasted into the target location shrunk down to 16x16 pixel size, rather than the appropriate 16x16 pixel portion of the raster.

Fandom support mentioned "the infoicons should probably be placed inside a template wrapper, with the wrapper classified as "Infoicon", which should display them at the proper size." Myself, and others on the wiki do not have the coding experience to understand how a "template wrapper" functions.

Example of problem:
Visit this page on a mobile device and look at the items that are listed under "drops" within the infobox.

-Sitb (talk) 11:15, March 24, 2019 (UTC)

Does anyone have a good "trick" for getting images to scale based on the device accessing the wiki?

As a wiki focused on a mobile game, it makes sense for us to be as portable as possible. I've been creating a number of templates for our standard tables, etc. to allow us to scale things well.

I've found some information about scaling images using some CSS and <div> tags. But wasn't sure if anyone had already worked this out with a custom template or something?

Our engineers have put together a list of all points we currently have that users can implement to make their community portable. 

It's brief, but comprehensive, and we've added infos on what you can do/use instead wherever possible: Portability_Checklist. We don't have great alternate solutions for everything yet, but hopefully this is still a useful tool. 

If you guys feel this list is not beginner-friendly enough, unrealistic, or lacking in any other way, let us know!

Notices

The ideal HTML element for this to render as is (surprisingly) <figure> ("Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc."). This term and syntax is for hatnotes, message boxes, and the thin variants like Asbox. I've included some categorization, some TemplateData-like syntax, alternate versions listings for redirects and sections, and a hint to Flags.

<notice theme="editing" theme-source="mbox-type" layout="mbox(|hatnote|thin)">
   <data priority="main" source="issue">
      <default lang="en"> has serious editing issues.</default>
      <prefix source="sect">
        <default lang="en">This article</default>
        <hint lang="en">What has issues?</hint>
      </prefix>
      <format line-break="after">{{{sect}}}{{{issue}}}</format>
      <hint lang="en">What is wrong?</hint>
   </data>
   <data source="guideline">
      <default lang="en">Please fix them.</default>
      <hint lang="en">What guidelines apply to fix this?</hint>
   </data>
   <image layout="left" source="icon"><default>File:Editing</default></image>
 
   <category namespace="Main">Articles needing editing</category>
   <template-category lang="en">Editing Notices</template-category>
   <template-name priority="primary" lang="en">Template:Editing</template-name>
   <template-name priority="alternate" lang="en">Template:Copyedit</template-name>
   <template-name priority="portion" lang="en">Template:Copyedit_section</template-name>
</notice>

Side boxes

These are fairly minimal to begin with, but would either be <details> or <aside> in HTML5. Since <details> is not widely supported, <aside> it is.

<box theme="" theme-source="" collapsible="expanded(|collapsed|off)" layout="right(|left)">
   <navigation />
   <image layout="left" source="image"><default /></image>
   <data source="" />
 
   <template-name priority="primary" lang="en">Template:AdditionalInfo</template-name>
</box>

Navboxes and Sidebars

Navboxes and Sidebars are virtually the same thing, layed out either horizontally or vertically. Either way, they'd be <nav> in HTML5. This method uses <group> as a much better way of nesting Navboxes. Note that there's also additional attributes to "format" and the addition of collapsibility.

<navbox theme="" theme-source="" layout="wide(|left|right)" collapsible="collapsed(|expanded|off)" navbar="off(|show|plain)">
   <title />
   <header />
   <navigation />
   <image layout="right" />
   <group collapsible="collapsed(|expanded|off)" evenodd="off(|swap|even|odd)" class="">
      <header>...</header>
      <group collapsible="collapsed(|expanded|off)" evenodd="swap(|even|off|off)" class="">
         <header>...</header>
         <data>
            <!- There should be a way to pull this from a Lua or JSON table in "source" ->
            <default>Item 1; Item 2; Item 3</default>
            <format list="horizontal" separator";" />
         </data>
      </group>
   </group>
 
   <template-name priority="primary" lang="en">Template:Navbox_genericexample</template-name>
</navbox>