(react-day-picker's .rdp-month_grid) that sizes
* to content by default, so it kept overflowing past the now-
* correctly-sized dropdown regardless. table-layout:fixed + width:
* 100% makes its columns share the available width equally instead.
*
* 3. Even with the table fixed, Commerce7's own cells carry a
* hardcoded padding:15px, sized for the original ~86px-wide desktop
* cell (56px of content left over). At a ~43px mobile cell that
* padding alone eats 30 of the 43px, so the day button inside — even
* set to width:100% — has almost no room. The cell's own padding has
* to be trimmed too, not just the button sized.
*/
@media (max-width: 900px) {
.c7-date-picker-dropdown {
position: absolute !important;
inset: auto auto auto 0 !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
width: auto !important;
max-width: 100% !important;
}
.c7-date-picker-dropdown .rdp-month_grid {
table-layout: fixed !important;
width: 100% !important;
}
.c7-date-picker-dropdown .rdp-day_button {
width: 100% !important;
padding: 8px 2px !important;
box-sizing: border-box !important;
}
.c7-date-picker-dropdown .rdp-day,
.c7-date-picker-dropdown .rdp-weekday {
padding: 2px !important;
}
}
/**
* PRODUCT PAGE "KEY FEATURES" BAND — two separate mobile bugs in
* Commerce7's own PDP CSS (both confirmed live on Larkhaven's
* 2015 Reserve Pinot Noir, a product with no additional images —
* reported as "too much space instead of images" and "Farming Practice
* going off canvas," though neither bug is actually about the product's
* photos; a product WITH more images has the exact same underlying CSS
* and would show it too, just less obviously on a taller page):
*
* 1. .pdp-key-features carries `margin-top: -150px` and
* `padding: calc(var(--pdp-space-xl) + 80px) 0 var(--pdp-space-xl)`
* — reasonable proportions on a wide desktop layout (confirmed via
* screenshot: a normal, well-spaced band there), but that's ~300px
* of fixed vertical spacing with no mobile override at all, which
* reads as a large dead cream-colored gap above the feature icons
* on a ~700-900px-tall phone screen.
*
* 2. .pdp-features (the flex row of up to 4 feature columns) never
* sets flex-wrap, so it defaults to nowrap — and Commerce7's OWN
* responsive rules for the child .pdp-feature elements
* (flex-basis: 45% under 900px, 100% under 600px, clearly written
* to make them wrap into 2 columns then 1) never fire, because
* flex-basis percentages don't force a new line without
* flex-wrap: wrap on the parent. The 4 columns stay on one row,
* each keeping its natural content width, and the row overflows the
* viewport — confirmed live: 521px of combined column width in a
* 294px-wide container, with the last column ("Farming Practice" on
* this product) pushed off-canvas. Adding the one missing
* declaration is enough to make Commerce7's own existing breakpoint
* rules finally take effect as originally authored — not
* reimplementing their responsive design, just turning it on.
*/
@media screen and (max-width: 900px) {
.pdp-key-features {
margin-top: 0 !important;
padding: var(--fw-space-lg) 0 !important;
}
.pdp-features {
flex-wrap: wrap !important;
}
}
/* Allocated products swap the add-to-cart form for this block, but
Commerce7's PDP CSS centers only the form: the message and Login
button sat flush left under a centered title. Same box as the form. */
.c7-product-detail .c7-product__login-message {
max-width: 420px;
margin: 0 auto;
padding-bottom: var(--pdp-space-sm);
border-bottom: 1px solid var(--pdp-border);
text-align: center;
}
.c7-product-detail .c7-product__login-message p { margin: 0 0 var(--pdp-space-sm); }
/**
* PRODUCT PAGE "ADDITIONAL IMAGES" GALLERY — the actual source of the
* dead space reported for products with no gallery photos beyond the
* main bottle shot (2015 Reserve Pinot Noir on Larkhaven; confirmed the
* same on 6 of 7 other Larkhaven wines sampled — this is the common
* case, not an edge case). Commerce7 always renders three fixed-size
* slots after the product info block:
*
*
*
* A slot with a real photo gets a nested /![]() ; one with no
* photo configured is left as a genuinely empty, childless .
* :empty is exactly the right tool here — it matches a childless slot
* precisely and never a real one (a populated slot's is a
* real child element, so :empty correctly never matches it), without
* needing to know anything about this product's data.
*/
.pdp-image-narrow:empty,
.pdp-image-wide:empty {
display: none !important;
}
/**
* A second, separate bug in the same gallery, this one a real content
* loss rather than dead space: Commerce7's own CSS carries
*
* @media screen and (max-width: 600px) {
* .pdp-image-narrow:last-of-type { display: none; }
* }
*
* — unconditional, regardless of whether that third slot actually has
* a photo. Confirmed live on 2015 Chardonnay (the one product in the
* original sample with real gallery photos, all three slots populated
* with three distinct images): on any phone ≤600px wide, the third
* photo is simply discarded — 3 images shown (hero + 2) instead of 4,
* every time, on every product that has one, regardless of the actual
* :empty fix above. This isn't a mobile simplification worth keeping;
* it silently drops real content a winery specifically uploaded. Undo
* it, but only when that slot actually has a photo — an empty one
* should obviously stay hidden, which is exactly what :not(:empty)
* guarantees, and why this can't just delete Commerce7's rule outright
* (we don't control their stylesheet to remove a rule, only add one
* that wins — see the .c7-date-picker-dropdown fix above for the same
* "compete with an injected stylesheet" situation and why !important
* is needed again here).
*/
@media screen and (max-width: 600px) {
.pdp-image-narrow:last-of-type:not(:empty) {
display: block !important;
}
}
|