/* * Mobile layer for the BackpackOT theme. * * The base theme is desktop-only by construction: min-width:1000px is set on * BOTH #ArtworkHelper and #Bodycontainer, the menu and themebox rails are * absolutely positioned into 180px gutters, and there are no media queries * anywhere. On a phone that forces a 1000px canvas and pinch-zoom. * * Everything here lives inside max-width media queries, so DESKTOP RENDERING * IS UNCHANGED -- none of these rules can match above the breakpoint. Paired * with the viewport meta tag in index.php, which only affects mobile too. * * Verified against the real markup (index.php): the wrapper chain is * #ArtworkHelper > #Bodycontainer > #ContentRow > {#MenuColumn, * #ContentColumn, #ThemeboxesColumn}. An earlier version of this file missed * #ArtworkHelper's min-width and #Bodycontainer's display:table, which left * the whole page stuck at 1000px regardless of the other overrides. */ /* iOS Safari inflates text on pages it judges to be desktop-width, which is what made the content look 'stretched and chunky' and pushed tables past the viewport -- the sideswipe was a symptom of oversized type, not of table widths. Pinning this to 100% is safe on desktop (it only disables automatic inflation, it never scales anything down). */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } /* Mobile chrome (header bar + drawer) is inert above the breakpoint: every piece is display:none here, so desktop renders exactly as before. */ #MobileHeader, #MobileMenuButton, #MobileMenuScrim, #MobileMenuToggle { display: none; } @media screen and (max-width: 900px) { /* Fixed top bar: players online and the boosted creature on the left, logo optically centred (two equal flexible side columns), and the sole action, the menu, on the right. */ #MobileHeader { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; position: fixed; top: 0; left: 0; right: 0; height: calc(58px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)); box-sizing: border-box; z-index: 1000; /* title-background-green.gif is a 24px-tall caption strip. repeat-x alone covered only the top half of a 52px bar and left the flat fallback showing beneath it, so tile on both axes and lay a soft vertical gradient over the seam for depth. */ background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.22) 100%), url(images/content/title-background-green.gif) repeat center; background-color: #2f4a2a; border-bottom: 2px solid #9c7c43; box-shadow: 0 3px 8px rgba(0,0,0,.5); } #MobileMenuButton { display: flex; align-items: center; justify-content: center; grid-column: 3; width: 40px; height: 40px; background: rgba(0,0,0,.28); border: 1px solid #9c7c43; border-radius: 5px; color: #f7e7b8; text-decoration: none; cursor: pointer; flex: 0 0 auto; } .MobileMenuIcon { font-size: 21px; line-height: 1; } #MobileLogo { grid-column: 2; text-align: center; overflow: hidden; margin: 0 8px; line-height: 0; } #MobileLogo img { height: 46px; width: auto; max-width: 100%; } /* Two label/value pairs set straight on the bar -- no panels, no edges: today's boosted creature on the left (the phone's version of the desktop pedestal, since #RightArtwork goes with the rails below) and players online beside the menu on the right. Each is its own link. The label is the plaque eyebrow of highscores.css, in gold. */ #MobileBoost, #MobileOnline { display: flex; align-items: center; min-width: 0; min-height: 40px; color: #f0d1a4; text-decoration: none; font-family: Verdana, Arial, sans-serif; text-shadow: 1px 1px 0 #152315; white-space: nowrap; } #MobileBoost:focus-visible, #MobileOnline:focus-visible { outline: 2px solid #d9b34e; outline-offset: 2px; } #MobileBoost { position: relative; grid-column: 1; justify-self: start; gap: 6px; max-width: 100%; } /* A soft warm glow BEHIND the creature -- dark sprites (Black Knight, Warlock) sank into the green bar. A radial gradient, so nothing is drawn over the sprite and its pixels stay crisp. */ #MobileBoost::before { content: ""; position: absolute; left: -4px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: radial-gradient(circle, rgba(255,244,214,.60) 0%, rgba(255,226,150,.34) 42%, rgba(255,226,150,.10) 64%, rgba(255,226,150,0) 78%); pointer-events: none; } #MobileBoost img { position: relative; flex: 0 0 auto; width: 36px; height: 36px; image-rendering: pixelated; } .MobileStat { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } #MobileOnline .MobileStat { align-items: flex-end; } .MobileStatLabel { display: flex; align-items: center; gap: 4px; color: #d9b34e; font-size: 8px; font-weight: bold; line-height: 11px; letter-spacing: .6px; text-transform: uppercase; } .MobileStatValue { overflow: hidden; font-size: 11px; font-weight: bold; line-height: 15px; text-overflow: ellipsis; } #MobileOnline .MobileStatValue { color: #f7c927; font-size: 15px; font-variant-numeric: tabular-nums; } #MobileOnline.is-offline .MobileStatValue { color: #ffcfbf; font-size: 11px; } /* The Highscores box's online square. */ .MobileOnlinePip { flex: 0 0 auto; width: 6px; height: 6px; background: #2d9a50; box-shadow: 0 0 0 1px #152315; } #MobileOnline.is-offline .MobileOnlinePip { background: #b0392b; } #MobileHeaderEnd { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; min-width: 0; } @media (max-width: 389px) { #MobileBoost img { width: 32px; height: 32px; } #MobileBoost::before { width: 40px; height: 40px; margin-top: -20px; } .MobileStatValue { font-size: 10px; } #MobileHeaderEnd { gap: 8px; } } /* One viewport-sized canvas on every page. Repeating the artwork at 100lvh introduced a hard sky/ground seam at arbitrary footer positions. Root background painting also covers the document's bottom clearance. */ html { background: #29432b url(images/header/background-artwork.jpg) no-repeat center top fixed; background-size: cover; isolation: isolate; } /* iOS can treat background-attachment:fixed as scrolling. A root-level fixed layer keeps the same crop on short and long pages; 100lvh covers the expanded viewport as Safari's controls collapse. The root canvas above remains painted as a fallback for browser-controlled inset areas. */ html::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; background: url(images/header/background-artwork.jpg) no-repeat center top / cover; } body { background: transparent !important; min-height: 100vh; min-height: 100dvh; } /* Push the page below the fixed bar. */ /* (!) THE critical override. Both wrappers carry min-width:1000px, and #Bodycontainer is display:table which sizes to content rather than the viewport. Without all four properties the document stays 1000px wide and every downstream max-width is meaningless -- a descendant's 100% just resolves against a 1000px parent. Do not remove. */ #ArtworkHelper, #Bodycontainer { min-width: 0 !important; max-width: 100% !important; width: 100% !important; height: auto !important; display: block !important; } #ContentRow { display: block !important; top: 0 !important; width: auto !important; max-width: 100% !important; } /* Clearance for the fixed bar. Generous because each panel's title is a pre-rendered headline image that sits above its box and was being clipped by the bar. */ #ArtworkHelper { padding-top: calc(78px + env(safe-area-inset-top, 0px)) !important; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); box-sizing: border-box; } /* The desktop logo, banner and login box are all replaced by the bar. */ #BigLogo, #DownloadClientBanner, #Loginbox { display: none !important; } /* Menu: a dropdown that falls from the hamburger, not a full-height rail. Height is driven by the content (capped so a long menu can still scroll), so the panel and its backdrop stay proportionate to the number of items instead of always filling the screen. */ #MenuColumn { position: fixed !important; top: calc(66px + env(safe-area-inset-top, 0px)) !important; left: max(8px, env(safe-area-inset-left, 0px)) !important; right: auto !important; bottom: auto !important; /* content height, NOT full screen */ z-index: 999; width: max-content !important; /* hug the 188px frame art, no dead band */ max-width: 84vw !important; max-height: calc(100vh - 150px) !important; max-height: calc(100dvh - 150px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; margin: 0 !important; /* No padding, border or panel fill: each Themebox already carries its own chain-frame artwork and an opaque ground, so a second frame around them only showed as a dark margin on all four sides. The drop-shadow follows the artwork's own silhouette rather than a box, which keeps the menu lifted off the page without drawing an edge. */ padding: 0 !important; overflow-y: auto !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); /* Drop-down: falls and fades from just under the bar. */ opacity: 0; transform: translateY(-10px); transform-origin: top left; pointer-events: none; transition: opacity .16s ease-out, transform .18s ease-out; } #MobileMenuToggle:checked ~ #MenuColumn { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Menu rows are sized for a mouse; give them real tap height and keep the fixed-width frame artwork from being stretched by the panel. */ #MenuColumn .Themebox, #MenuColumn table { width: 188px !important; max-width: 188px !important; } #MenuColumn a { padding-top: 3px !important; padding-bottom: 3px !important; } /* Backdrop closes the menu on tap. Sits below the panel but above the page, and is only interactive while the menu is open. */ #MobileMenuScrim { position: fixed; top: calc(58px + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; z-index: 998; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .16s ease-out; } #MobileMenuToggle:checked ~ #MobileMenuScrim { opacity: 1; visibility: visible; } /* The menu and themebox rails are built from fixed 180px-wide GIF frames. Stretching them to the viewport blows the artwork up (the chain borders and headers scale with it), so they keep their natural width and are simply centred instead. */ #ThemeboxesColumn, #Themeboxes { display: none !important; } /* Content is fluid tables, so it can safely take the full width. Padding keeps text off the screen edges -- the desktop theme relies on the 205px gutters for that, which are gone here. */ /* ------------------------------------------------------------------ Content column. Principle: override only what is genuinely desktop-specific (fixed widths, absolute positioning, oversized art) and otherwise let the theme's own spacing and frame chrome do its job. Earlier revisions fought the theme with blanket rules and produced worse results -- notably a descendant max-width that collapsed table columns to their minimum width, and word-break that split headers mid-word. ------------------------------------------------------------------ */ #ContentColumn { width: auto !important; max-width: 100% !important; margin: 0 0 12px 0 !important; padding: 0 6px !important; box-sizing: border-box !important; } /* Type: one scale, set once. 13px keeps tables readable without the inflation iOS would otherwise apply. */ #ContentColumn, #ContentColumn td, #ContentColumn th, #ContentColumn div, #ContentColumn span, #ContentColumn a, #ContentColumn p { font-size: 13px !important; line-height: 1.35 !important; } #ContentColumn h1, #ContentColumn h2 { font-size: 16px !important; } /* Text fields. The theme defines NO css for inputs at all -- every field is sized by its HTML size attribute (39 of them across 23 templates, mostly size="30", which is ~250-300px). On a phone that single field fills the row and pushes the submit button off the edge. Forcing width:100% overrides the attribute's contribution to intrinsic width, so the field fits its cell and the button stays visible. Done here rather than by editing 23 templates. */ #ContentColumn input[type=text], #ContentColumn input[type=password], #ContentColumn input[type=email], #ContentColumn input[type=search], #ContentColumn input[type=number], #ContentColumn input:not([type]), #ContentColumn textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 5px 6px !important; } /* Form buttons. MyAAC lays these forms out as two table cells side by side: the fields on the left, a button column on the right (#LoginFormButtonCell) with float:right. At phone width the button column is squeezed to ~40% while .BigButton is a fixed 112px, so the buttons overflow their cell and clip at the panel edge. tibia.com solves the same problem by putting the buttons on their own row beneath the fields, side by side -- this does the same. :has() is used to reach the containing row; it is supported on every iOS version that can run this layout, and the rule simply does not apply on anything older, leaving the current behaviour. */ #ContentColumn tr:has(> #LoginFormButtonCell) > td { display: block !important; width: 100% !important; } /* (!) The fields cell holds . Once the cells above became blocks, that float left the flow and the button block slid UNDERNEATH it -- the buttons rendered, but behind the fields table's own background, so they were simply invisible. Unfloating the inner table (and clearing the button cell for good measure) is what actually puts the buttons on screen. Do not drop these two rules. */ #ContentColumn tr:has(> #LoginFormButtonCell) > td > table { float: none !important; } #ContentColumn #LoginFormButtonCell { clear: both !important; } #ContentColumn #LoginFormButtonCell > div { float: none !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; margin-top: 10px !important; } /* (!) These buttons must keep their natural 112x21 size. .BigButton is a fixed-size sprite (sbutton.gif) with .BigButtonText absolutely positioned over it at a fixed 112px -- stretching the box tiles the sprite and leaves visible seams while the label stays put. Two of them plus the gap fit a phone comfortably, and flex-wrap handles anything narrower. */ #ContentColumn #LoginFormButtonCell .BigButton { flex: 0 0 auto !important; width: 112px !important; } /* The second button is wrapped in an , which is inline and therefore shrink-to-fit around a child whose only content is absolutely positioned -- that is what collapsed "Account lost?" to a sliver. Making it a block-level flex item of its own gives it the button's width. */ #ContentColumn #LoginFormButtonCell > div > a { display: block !important; flex: 0 0 auto !important; width: 112px !important; line-height: 0 !important; } /* The 2px spacer div between the buttons; `gap` does that job now, and as a flex item it only adds a stray column. */ #ContentColumn #LoginFormButtonCell > div > div[style*="width: 2px"] { display: none !important; } /* Any fixed-width button anywhere must still fit its container. */ #ContentColumn .BigButton, #ContentColumn .Button { max-width: 100% !important; } /* Checkbox + label pairs wrap onto two lines and lose their association ("Remember me" breaking after the box). */ #ContentColumn input[type="checkbox"] { vertical-align: middle !important; margin-right: 4px !important; } #ContentColumn input[type="checkbox"] + label { display: inline !important; white-space: nowrap !important; } /* Labels in form rows read better stacked than squeezed beside the field. */ #ContentColumn label { display: inline-block !important; } /* Form controls stay at 16px: below that, iOS zooms the viewport when an input takes focus, which would undo the whole layout. */ #ContentColumn input, #ContentColumn select, #ContentColumn textarea { font-size: 16px !important; max-width: 100% !important; } /* (!!) ...but a submit button is not a form control you type into, so iOS never zooms for it -- and the rule above was catching .BigButtonText, inflating the label from 11px to 16px inside a fixed-size sprite. That is what made every button on the account page look chunky on a phone while looking correct on the desktop. Keep this exception below that rule. */ #ContentColumn input.BigButtonText, #ContentColumn input.ButtonText { font-size: 11px !important; } /* Same fault, plain-text version: the loyalty "[Set]" primary-character link is a bare with no button sprite behind it, styled inline to sit flush with the [Edit] text link beside it. Unclassed, it fell under the 16px rule above and rendered noticeably larger and bolder than every other link in the row. */ #ContentColumn input.AccountSetPrimaryBtn { font-size: 10px !important; } /* Selects sit inline in filter rows and would otherwise force the row wider than the panel. */ #ContentColumn select { max-width: 46vw !important; } /* Wrapping: allow long unbroken strings (URLs) to wrap, but NEVER break inside ordinary words -- word-break:break-word here is what rendered "Rank" as "Ra nk" in a narrow column. */ #ContentColumn { overflow-wrap: break-word; } #ContentColumn td, #ContentColumn th { word-break: normal !important; } /* Media with hard width attributes (news posts embed width="500" images). max-width alone cannot win: in an auto-layout table the attribute width feeds the column's min-content size, so the table grows and the page overflows. Clearing width removes that input entirely. */ /* :not(.ib-sprite) exempts the Item Bazaar item sprites. This rule exists for author-pasted news media and listing thumbnails; a Bazaar sprite is deliberately sized by bazaar.css and "height: auto !important" was silently collapsing it back to its natural 32px, which no amount of specificity in a later stylesheet can beat. Narrowing the blanket is the fix -- adding another !important on the other side is not. */ #ContentColumn img:not(.ib-sprite), #ContentColumn iframe, #ContentColumn embed, #ContentColumn object, #ContentColumn video { width: auto !important; max-width: 100% !important; height: auto !important; } /* Row height in listings is driven by outfit thumbnails, not text. :not(.ib-sprite) for the same reason as the rule above -- the Bazaar grid still sits inside the page content table, so a bare "td img" matches its sprites and this max-height was squashing a 96px square to 96x34 while the width held. A stretched sprite, not a small one, which is why it read as a rendering bug rather than a sizing rule. */ #ContentColumn td img:not(.ib-sprite) { max-height: 34px !important; } /* Panels may scroll internally if a table genuinely cannot compress, rather than widening the document. */ #ContentColumn .TableContainer, #ContentColumn .TableContentContainer, #ContentColumn .InnerTableContainer { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------------ height:100% blow-ups. ROOT CAUSE: templates/backpackot/index.php emits no DOCTYPE -- the document opens straight with -- so every browser renders this site in QUIRKS MODE. In quirks mode a percentage height resolves against the viewport even when every ancestor is auto-height, instead of computing to auto. Any `height:100%` in basic.css therefore becomes "as tall as the screen". On desktop the surrounding table geometry constrained these boxes so it never showed. Without it they expand to a full screenful each, which is what turned a section caption into a full-height block and what made the logged-in account page a column of near-empty panels. The real fix is adding , which is deliberately NOT done here: this entire theme was authored against quirks-mode box sizing and table behaviour, so flipping the whole site to standards mode is a separate, desktop-affecting change that needs its own testing pass. Until then, each affected family is neutralised explicitly. ------------------------------------------------------------------ */ .TableContainer .CaptionContainer, .TableContainer .CaptionContainer .CaptionInnerContainer, .TableContainer .CaptionContainer .CaptionVerticalLeft, .TableContainer .CaptionContainer .CaptionVerticalRight, .TableContentContainer { height: auto !important; } /* The account pages are built entirely from .SmallBox > .MessageContainer > .Message, and the latter two are height:100%. NOTE the exclusions: the BoxFrameVertical* elements are also height:100% but are absolutely positioned inside .Message, so theirs resolves correctly against it and must stay -- forcing those to auto collapses the box's side frames. */ #ContentColumn .SmallBox, #ContentColumn .SmallBox .MessageContainer, #ContentColumn .SmallBox .Message, #ContentColumn .SmallBox .ErrorMessage { height: auto !important; } /* News ticker. Two desktop assumptions break on a phone: 1. .BoxContent is min-height:90px / height:100px, sized for the five entries a desktop shows. With fewer entries that leaves a large empty panel below the last row. 2. .NewsTickerShortText has margin-left:85px to clear the absolutely positioned date, and height:14px for exactly one line. At phone width the headline no longer fits that line, so it wraps -- and every continuation line starts at the 85px indent, which is the stray right-shifted second line rather than a wrapping bug per se. tibia.com keeps each ticker row to a single truncated line, which is what this does: the row stays one line and ends in an ellipsis, and the panel grows to its content instead of a fixed 100px. The full text is still reachable through the existing [+] toggle. */ .Content #NewsTicker .BoxContent { min-height: 0 !important; height: auto !important; padding: 4px 5px !important; } .Content #NewsTicker .BoxContent .Row { padding: 2px 0 !important; } .Content #NewsTicker .NewsTickerDate { font-size: 11px !important; } .Content #NewsTicker .NewsTickerShortText { /* Clears the date (~74px at 11px) plus the [+] button on the right. */ margin-left: 78px !important; margin-right: 20px !important; height: auto !important; line-height: 1.45 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* The expanded text must still wrap -- only the collapsed row is truncated. */ .Content #NewsTicker .NewsTickerFullText { margin-left: 78px !important; margin-right: 20px !important; white-space: normal !important; } .HomeTopGrid { display: block !important; } .HomeTickerSlot > .Box, .HomeCompendiumLink > .Box { height: auto !important; } #ContentColumn .HomeCompendiumLink { display: block !important; } #ContentColumn .HomeCompendiumTitle { font-size: 18px !important; line-height: 24px !important; } #ContentColumn #HomeCompendium .BoxContent, #ContentColumn #HomeMap .BoxContent { min-height: 0 !important; padding: 11px 13px !important; } /* mobile.css's blanket img rule would snap the thumb to auto; keep the 1:1 slice. */ #ContentColumn .HomeMapThumb img { width: 140px !important; height: 84px !important; max-width: none !important; } #ContentColumn .HomeCompendiumCopy strong { font-size: 14px !important; } #ContentColumn .HomeCompendiumCopy span { font-size: 11px !important; } #ContentColumn .HomeCompendiumCopy em { font-size: 11px !important; } /* News headline: on desktop the date, title and author are absolutely positioned into a fixed-height strip painted with a background image (left:50px / left:135px). At phone width the title reflows and lands on top of the author. Return them to flow and let the strip grow, so the text stays inside the bar instead of spilling out of it. */ #ContentColumn .NewsHeadlineBackground { height: auto !important; min-height: 0 !important; overflow: visible !important; padding: 6px 10px !important; box-sizing: border-box !important; background-size: 100% 100% !important; } #ContentColumn .NewsHeadline { height: auto !important; min-height: 0 !important; overflow: visible !important; } #ContentColumn .NewsHeadlineIcon, #ContentColumn .NewsHeadlineDate, #ContentColumn .NewsHeadlineText, #ContentColumn .NewsHeadlineAuthor { position: static !important; top: auto !important; left: auto !important; right: auto !important; width: auto !important; height: auto !important; margin: 0 !important; float: none !important; text-align: left !important; white-space: normal !important; display: block !important; } /* The icon only existed to fill the 50px gutter the absolute layout made. */ #ContentColumn .NewsHeadlineIcon { display: none !important; } #ContentColumn .NewsHeadlineDate, #ContentColumn .NewsHeadlineAuthor { font-size: 11px !important; opacity: .9; } #ContentColumn .NewsHeadlineText { font-size: 14px !important; } /* Teaser thumbnails are a fixed 150px float on desktop. */ #ContentColumn #TeaserThumbnail { float: none !important; width: auto !important; max-width: 100% !important; margin: 0 0 6px 0 !important; } /* Layout gutter cells. Several MyAAC pages open their layout table with an empty fixed-width spacer cell (highscores uses
) to inset the content from the frame. There is no matching cell on the right, so on a narrow screen the content visibly sits off-centre in its panel. The mobile padding already provides that inset. */ #ContentColumn td[style*="width: 17px"], #ContentColumn td[style*="width:17px"] { display: none !important; } /* Highscores. The Points column carries exact experience, which is not what anyone scans a ranking for on a phone -- and it is the column that pushes the table past the panel edge. Hidden here only; desktop keeps it. The filters table and the data table are siblings inside the same cell, so the sibling combinator targets the ranking table specifically rather than every table on the site. */ #ContentColumn .HighscoresFilters ~ table tr > *:nth-child(4) { display: none !important; } /* Filter row: sized for a wide column, and the dominant element on screen before the ranking itself. */ #ContentColumn .HighscoresFilters td { padding: 3px 5px !important; font-size: 12px !important; } #ContentColumn .HighscoresFilters label { font-size: 11px !important; display: block !important; margin-bottom: 1px !important; } #ContentColumn .HighscoresFilterSelect { font-size: 13px !important; max-width: 38vw !important; padding: 2px 4px !important; } /* Footer text is centred against a 1200px stage. The bottom padding keeps the last line clear of Safari's floating toolbar, which overlays the bottom of the viewport rather than reserving space for itself; safe-area-inset-bottom covers the home indicator on top of that. */ #Footer { padding: 0 10px calc(28px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box !important; } } @media screen and (max-width: 640px) { /* The Item Bazaar's rules used to live here -- ~110 lines, every selector prefixed with #ContentColumn and every declaration !important, purely to outrank this file's own blanket type scale. They now live in templates/backpackot/bazaar.css, which loads after this file and so needs neither. Only the generic form rule below was ever non-Bazaar, so it stays. */ /* Keeps any narrow form control inside its column rather than overflowing. */ #ContentColumn form select, #ContentColumn form input[type="text"] { max-width: 100%; } } @media screen and (max-width: 900px) { /* News bodies are author-written HTML, not listing tables. The 34px thumbnail cap higher up must not reach them, even when the author pastes a table into the post. The generic #ContentColumn img rule still keeps them in-column. */ #ContentColumn .NewsContent img, #ContentColumn .NewsContent td img { max-height: none !important; } #ContentColumn .NewsContent { padding: 0 6px; } /* Featured-article teaser: desktop pins the frame at 150x100 and the image fills it. On mobile the frame goes full width, so give it a height to fill or the 100%-height image inside collapses. */ #ContentColumn #TeaserThumbnail { height: 170px !important; width: 100% !important; } #ContentColumn #TeaserThumbnail img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; } }