/* ============================================================================
mobile.css -- storefront mobile/responsive overrides
----------------------------------------------------------------------------
Loaded LAST of the platform stylesheets in _LayoutHead.cshtml, immediately
before the per-purchasing-organization GlobalStyles content block. That order
is deliberate and load-bearing:
... global.css, responsive*.css, ... , _DynamicCss, mobile.css, GlobalStyles
* It comes after every other platform stylesheet, so rules here win against
global.css / responsive.css without needing !important.
* It comes before GlobalStyles, so a purchasing organization's own CSS still
overrides anything here. Stores keep control of their own storefront.
Put NEW mobile rules in this file rather than editing global.css (254 KB) or
responsive.css directly. Several tickets are running in parallel against the
same breakpoints; concentrating new rules here keeps them out of each other's
way and makes the whole effort revertible by removing one .
Fixing an EXISTING bad rule still happens where that rule lives -- this file
is for additions, not for shadowing every old declaration.
Breakpoints in use across the theme (match these, do not invent new ones):
max-width: 480px phones (col-xxs-* is defined here)
max-width: 767px phones + small tablets -- the main mobile breakpoint
768-991px tablets
992-1199px small desktop
NOTE FOR ADDING FILES: every theme asset is an explicit in
OrderForge.MarketFlux.Web.csproj. A stylesheet that is not listed there is
present in the repo and MISSING in a deployed environment. If you add another
file next to this one, register it in the csproj in the same commit.
============================================================================ */
/* ---------------------------------------------------------------------------
PROV-139433 -- fixed pixel widths that overflow a phone viewport.
Rules here override global.css (mobile.css loads after it) and are scoped to
the mobile breakpoint, so desktop keeps the widths it has today.
Page-scoped cases live in that page's own stylesheet instead, because
cart.css / product.css / addresses.css are included from the view and so
land after this file. See cart.css for the cart summary columns.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* Add-to-cart confirmation. global.css fixes .layer_box2 at 380px, which is
wider than a 375px phone once fancybox adds its own chrome. fancybox
measures the content and writes inline widths onto its wrapper, so the
wrapper is capped too -- max-width constrains an inline width, no
!important needed. */
.layer_box2 {
max-width: calc(100vw - 60px);
}
.fancybox-wrap,
.fancybox-inner {
max-width: calc(100vw - 30px);
}
/* Product page price block: 200px + 150px floated side by side overflows a
narrow phone. Stack them full width instead. */
.price_box,
.priceBreaks {
width: 100%;
max-width: 100%;
float: none;
}
}
/* ---------------------------------------------------------------------------
PROV-139434 -- the .resp_table card stack in responsive.css is only half
wired up. It prints the column label from a td's data-title into a floated
:before, then clears it with "margin-left: 130px" on .mobile_table_content.
Most cells never had a data-title, so the label was blank but the 130px
gutter still applied -- a third of a 375px screen reserved for nothing.
The missing data-title attributes are added in the templates; these rules
make the stack behave when a cell legitimately has no label.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* No label means no gutter to clear. */
.resp_table td:not([data-title]) .mobile_table_content {
margin-left: 0;
}
/* responsive.css sets white-space:nowrap on every cell so the floated label
stays on one line. .mobile_table_content resets it, but content outside
that wrapper -- the cart product name, for one -- keeps nowrap and runs
off the screen instead of wrapping. Put nowrap on the label only. */
.resp_table > tbody > tr > td,
.resp_table > tfoot > tr > td {
white-space: normal;
}
.resp_table td:before {
white-space: nowrap;
}
/* Totals rows are already label-and-value pairs, so stacking them puts
"Subtotal" and its amount on separate lines. Keep those two side by
side; .resp_table tr is display:block, so flex overrides it. */
.resp_table > tfoot > tr {
display: flex;
align-items: baseline;
}
.resp_table > tfoot > tr > td {
flex: 1 1 auto;
}
}
/* ---------------------------------------------------------------------------
PROV-139435 -- alignment between .box content and its siblings.
.box is the bordered card used for the forgot-password form, the shipping
carrier list and similar panels. Its content sits 19px in from the card edge
(18px padding + 1px border). Elements rendered as siblings of a .box rather
than inside it -- the "Back to Login" link, the checkout navigation buttons --
get no such inset, so they do not line up with the button directly above
them. Give them the same inset on mobile, where the mismatch is obvious.
Matched through a sibling combinator rather than by id, so the inset lands
only where there is a .box to line up with. SelectAddress, MultiAddress,
Payment and the order and report grids carry these same class names with no
.box anywhere on the page; there the 19px pushed them past the content above
instead of into line with it.
Only the alignment is addressed here. How much breathing room these pages
should have is a design decision, not a responsive defect, and the values
belong with that pass rather than guessed at now.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* 18px .box padding + 1px .box border. Setting it explicitly also drops the
browser's default ul indent, so the result is the same either way. */
#center_column .box ~ ul.footer_links,
#center_column .box ~ .cart_navigation {
padding-left: 19px;
padding-right: 19px;
}
}
/* ---------------------------------------------------------------------------
PROV-139438 -- the fixed bottom bar.
Below 767px responsive.css moves #rightbar from a right-hand rail to a bar
pinned across the bottom of the viewport. Nothing reserves space for it, so
it sits on top of whatever is at the end of the page -- the "Add a new
address" link on the address step, the buttons at the foot of checkout.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* The bar is 50px of icon plus its 1px borders. Let the page scroll clear
of it. #rightbar is a sibling of #body_wrapper, so this does not move the
bar itself. */
#body_wrapper {
padding-bottom: 60px;
}
/* Back-to-top belongs at the bottom of a long page, not permanently docked
over the content. responsive.css forces it visible with !important, so
overriding it needs the same weight. Hidden rather than removed from the
markup: global.js binds #to_top on load and toggles a class on scroll. */
#to_top_wrap {
display: none !important;
}
/* #rightbar_inner is marked rightbar_3, which sizes its children at a third
each. With back-to-top hidden the cart is the only control left, so it
takes the bar rather than sitting in the left third of it. */
.rightbar_wrap {
width: 100%;
}
}
/* ---------------------------------------------------------------------------
PROV-139463 follow-up -- the cart's intro line reading as flush.
The column gives 15px, which is where the summary table's outer border sits.
But the table's *text* sits 10px further in again, because every cell carries
its own padding. So on a phone the "your cart contains" line looks pinned to
the edge next to the rows beneath it. Match it to the cell content rather
than to the table border.
#center_column > .page-heading was in this rule as well and has been taken
out. Only four of the seven views with a page heading have a table under it,
so on Account, Addresses and SelectAddress the 10px pushed the heading past
everything else on the page. Leaving a heading on the column edge with the
rest of the content is the safer default; whether it should instead line up
with cell text is a design call for that pass.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
#cart-items-container > p {
padding-left: 10px;
padding-right: 10px;
}
}
/* ---------------------------------------------------------------------------
PROV-139557 -- nested layout tables inside a card-stacked cell.
responsive.css builds the card stack with descendant selectors, so any table
inside a .resp_table cell has its own table, rows and cells turned into
blocks, and its rows pick up the stack's 1px divider. The order line grid
nests a two-cell layout table in its Product column (expand arrow next to the
thumbnail); stacked, the arrow lands above the image with a stray rule under
it. Keep an inner table rendering as a table. Currently only #order-list
nests this way, but the rule is written to the pattern rather than the id.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
.resp_table td table {
display: table;
}
.resp_table td table tr {
display: table-row;
border-bottom: 0;
}
.resp_table td table td {
display: table-cell;
}
}
/* ---------------------------------------------------------------------------
PROV-139558 -- report grids drag the whole page sideways.
The three report tables are server-side DataTables: tbody is filled over
Ajax and the column set is configured per report, so there is no
server-rendered cell to carry a data-title and no fixed column count to
design a card stack around. The defect is not the table's shape, it is that
a table wider than the viewport pushes the page with it -- header, nav and
footer all shift. Contain the scroll to the table so the page layout holds
still and rows stay comparable. Sorting, paging and the Ajax source are
untouched; this is CSS only.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* display:block is what lets a table scroll its own overflow -- thead and
tbody keep their table roles inside it. The .datatable class is on the
three report tables and nothing else in the theme. */
table.datatable {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}