That 30px nudge is a desktop flourish. The wrapper is already `width: 100%`
of its grid column, so shifting it 30px to the right pushes it 30px past
the container on every screen. On desktop the page gutter absorbs it; on a
phone there is no slack left, so the image is clipped by the viewport.
CAUSE 2 - THE BUTTON
--------------------
`.btn` sets `white-space: nowrap` (style.css line ~250). "View Sample Chef
Profile & Menu" plus the arrow icon is wider than a phone column, and
nowrap forbids it from breaking, so the button box itself grows past the
card. `main#main-content a { overflow-wrap: anywhere; }` cannot help here
because nowrap wins - the text is never allowed to look for a break point.
THE FIX
-------
Both overrides are scoped to tablet and below, so the desktop layout is
byte-for-byte unchanged. `transform` needs `!important` because it is
fighting an inline style attribute, which no selector can outrank.
No HTML changes. This block must stay LAST in the file.
========================================================================== */
/* --------------------------------------------------------------------------
1. CANCEL THE 30px NUDGE BELOW DESKTOP
Targets only wrappers that actually carry the inline translate, so no
other image on the site is touched.
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.hero-main-img-wrap[style*="translateX"],
main#main-content .hero-main-img-wrap[style*="translateX"] {
transform: none !important;
margin-inline: 0 !important;
max-width: 100% !important;
}
}
/* --------------------------------------------------------------------------
2. LET LONG BUTTON LABELS WRAP ON PHONES
`nowrap` stays in force on desktop, where there is room for one line.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
main#main-content .btn {
max-width: 100%;
white-space: normal;
text-align: center;
overflow-wrap: break-word;
line-height: 1.35;
/* Vertical padding instead of a fixed height, so a 2-line label
still sits centred inside the button */
padding-block: 0.7rem;
height: auto;
}
/* The trailing arrow should never be orphaned onto its own line */
main#main-content .btn > i {
flex: 0 0 auto;
}
}
/* --------------------------------------------------------------------------
3. SAME 30px BUG, SAME PAGE — DELIVERY TRACKER + CALLOUT
`.delivery-tracker-card` and `.delivery-callout` are given
`width: calc(100% - 30px); margin-inline-start: 30px;` further up this
file. That is the identical desktop offset and it clips the same way
further down the How It Works page. Reset below desktop only.
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.delivery-tracker-card,
.delivery-callout,
main#main-content .delivery-tracker-card,
main#main-content .delivery-callout {
width: 100%;
margin-inline-start: 0;
margin-inline-end: 0;
}
}
/* ==================== END HOW IT WORKS OVERFLOW FIX ====================== */
/* ==========================================================================
==========================================================================
JOIN AS CHEF — FULL RESPONSIVE LAYER
320 / 360 / 480 / 768 / 1024 / 1280 / 1536+
==========================================================================
WHAT THE SCREENSHOT SHOWS
-------------------------
In the hero, the heading runs to the screen edge and the paragraph is
sliced mid-word ("build lastin..."). The orange CTA also bleeds past the
right edge while the outlined button below it sits correctly inside the
gutters.
THE CAUSE (one bug, three symptoms)
-----------------------------------
`.btn` sets `white-space: nowrap`, so "Start Your Chef Application" plus
its arrow can never break. At `.btn-lg` sizing that label is roughly
300px wide.
That button lives in the hero's left column, which is a grid item. Grid
items default to `min-width: auto`, meaning they refuse to shrink below
their min-content width - and min-content here is set by the unbreakable
button. So the whole column becomes ~300px+ on a 310px screen.
Making it worse, `@media (max-width: 860px)` adds `justify-items: center`
to `.hero-grid`. A centred grid item is sized fit-content rather than
stretched, so it settles at that min-content width and overhangs the
column on BOTH sides. The heading and paragraph then wrap to that too-wide
box, and the last line of each is what gets cut off at the viewport.
Nothing is wrong with the text itself - it is wrapping correctly, just to
a box wider than the phone.
THE FIX
-------
Three lines do the real work: let the grid children shrink (`min-width: 0`),
let long button labels wrap below 768px, and make the hero buttons full
width so they stop driving the column size. The rest of this block is the
device-by-device pass requested for the remaining sections.
No HTML changes. Desktop rendering is unchanged.
This block must stay LAST in the file.
========================================================================== */
/* --------------------------------------------------------------------------
0. THE ROOT FIX — grid children must be allowed to shrink
Unconditional: an item that cannot shrink is never correct.
-------------------------------------------------------------------------- */
main#main-content .hero-grid > *,
main#main-content .grid-2 > *,
main#main-content .grid-3 > *,
main#main-content .story-featured-box > * {
min-width: 0;
max-width: 100%;
}
/* The requirements card uses an inline `minmax(240px, 1fr)` auto-fit grid.
Inside a padded card on a 320px phone there is nowhere near 240px left,
so the track overflows. `min()` lets it collapse gracefully. */
main#main-content [style*="minmax(240px"] {
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
}
/* --------------------------------------------------------------------------
1. PHONES & SMALL TABLETS — up to 900px
Stack the hero before the two fluid columns run out of room. 900px rather
than 860px because a later `@media (min-width: 768px)` rule in this file
re-declares `.hero-grid` as two columns; `.hero-general .hero-grid` has the
higher specificity needed to beat it.
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
.hero-general .hero-grid {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: var(--space-8);
/* Inline `transform: translateY(-35px)` pulls the hero under the sticky
header once the layout stacks. */
transform: none !important;
}
.hero-general .hero-grid > * {
width: 100%;
justify-self: stretch;
}
.hero-general .hero-main-img-wrap {
width: 100%;
max-width: 100%;
margin-inline: auto;
}
}
/* --------------------------------------------------------------------------
2. PHONES — up to 767px
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* ---- Hero ---- */
.hero-general .hero-grid h1 {
font-size: clamp(1.9rem, 7.5vw, 2.6rem) !important;
line-height: 1.12;
}
.hero-general .hero-grid .lead-text {
font-size: 1rem;
line-height: 1.65;
}
/* Buttons stop dictating the column width */
.hero-general .btn-group {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: var(--space-3);
}
.hero-general .btn-group .btn {
width: 100%;
justify-content: center;
white-space: normal;
}
.hero-general .hero-main-img-wrap {
aspect-ratio: 4 / 3 !important;
}
/* ---- Section 2: why become a home chef ---- */
main#main-content .card[style*="border-inline-start: 4px"] {
padding: var(--space-5) !important;
}
/* ---- Section 3: onboarding roadmap ---- */
.roadmap-step-box {
gap: var(--space-3);
padding: var(--space-4);
}
.roadmap-number {
font-size: var(--text-xl);
line-height: 1.1;
}
/* ---- Section 4: comfort cards + image ---- */
main#main-content .card[style*="padding: var(--space-5)"] {
padding: var(--space-4) !important;
}
/* ---- Section 5: requirements card ---- */
main#main-content .card[style*="padding: var(--space-8)"] {
padding: var(--space-5) !important;
}
/* ---- Section 6: chef spotlight ----
`.story-featured-box .hero-main-img-wrap` carries `min-height: 500px`,
which is half a phone screen of photo before any text appears. */
.story-featured-box .hero-main-img-wrap {
min-height: 0 !important;
aspect-ratio: 4 / 3 !important;
}
.story-featured-box .story-quote {
font-size: 1.05rem;
padding-inline-start: var(--space-4);
margin-block: var(--space-4);
}
/* ---- Section 7: application form ---- */
main#main-content form .grid-2 {
gap: var(--space-3) !important;
}
}
/* --------------------------------------------------------------------------
3. SMALL PHONES — up to 480px
-------------------------------------------------------------------------- */
@media (max-width: 480px) {
.hero-general .hero-grid h1 {
font-size: clamp(1.75rem, 8vw, 2.2rem) !important;
}
.hero-general .kicker {
font-size: 0.66rem;
letter-spacing: 0.14em;
}
.roadmap-step-box {
flex-direction: column;
gap: var(--space-2);
}
.story-featured-box {
padding: var(--space-4) !important;
}
.story-featured-box h3 {
font-size: 1.5rem !important;
}
}
/* --------------------------------------------------------------------------
4. VERY SMALL PHONES — up to 360px
-------------------------------------------------------------------------- */
@media (max-width: 360px) {
.hero-general .hero-grid h1 {
font-size: clamp(1.6rem, 8.5vw, 2rem) !important;
}
main#main-content .card[style*="padding: var(--space-8)"],
main#main-content .card[style*="border-inline-start: 4px"] {
padding: var(--space-4) !important;
}
/* Icon + text rows in section 4 stay side by side but tighten up */
main#main-content .logo-mark[style*="32px"] {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
font-size: 0.75rem !important;
}
}
/* --------------------------------------------------------------------------
5. TABLETS — 768px to 1023px
Hero stays stacked (rule 1 covers it); the supporting grids go two-up.
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
.hero-general .hero-main-img-wrap {
max-width: 620px;
margin-inline: auto;
}
.hero-general .btn-group {
justify-content: flex-start;
}
.story-featured-box .hero-main-img-wrap {
min-height: 0 !important;
aspect-ratio: 16 / 10 !important;
}
main#main-content .card[style*="padding: var(--space-8)"] {
padding: var(--space-6) !important;
}
}
/* --------------------------------------------------------------------------
6. SMALL LAPTOPS — 1024px to 1280px
Two-column hero returns here, where the CTA fits on one line again.
-------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1280px) {
.hero-general .hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
column-gap: clamp(2rem, 4vw, 3.5rem);
}
.story-featured-box .hero-main-img-wrap {
min-height: 420px;
}
}
/* --------------------------------------------------------------------------
7. DESKTOP — 1281px and up
Nothing to correct; the original design applies unchanged.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
8. WIDE SCREENS — 1536px and up
-------------------------------------------------------------------------- */
@media (min-width: 1536px) {
.hero-general .hero-main-img-wrap {
max-width: 640px;
margin-inline-start: auto;
}
}
/* --------------------------------------------------------------------------
9. LANDSCAPE PHONES
-------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) {
.hero-general {
padding-block: 3rem !important;
}
.hero-general .hero-main-img-wrap {
aspect-ratio: 21 / 9 !important;
}
}
/* --------------------------------------------------------------------------
10. TOUCH TARGETS (WCAG 2.5.8)
-------------------------------------------------------------------------- */
@media (hover: none) {
.hero-general .btn-group .btn,
.roadmap-step-box .btn,
main#main-content form .btn {
min-height: 44px;
}
}
/* ==========================================================================
FIX — RESPONSIVE STICKY NAVBAR ONLY
Do not change navbar design/layout
========================================================================== */
@media (max-width: 1280px) {
html,
body {
overflow-x: clip;
}
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
}
}
/* Large Desktop (1025px and up): `html, body { overflow-x: hidden; }`
defined further down (About page fix sheet) is only overridden back to
`overflow-x: clip` for widths up to 1280px above, so above that the
`hidden` value forces `overflow-y` to a used value of `auto`, which turns
`` into a scroll container and breaks `.site-header`'s
`position: sticky`. Re-applying `clip` here (same visual clipping, no
scroll container) closes that gap for true desktop widths without
touching anything else about the navbar or page. */
@media (min-width: 1025px) {
html,
body {
overflow-x: clip;
}
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
}
}
/* ==========================================================================
USER AVATAR — DARK MODE VISIBILITY ONLY
========================================================================== */
[data-theme="dark"] .user-avatar {
background-color: #E9A413;
color: #1F1F1F;
border-color: #E9A413;
}
/* ==========================================================================
SECTION 7 — FINAL CTA DARK MODE TEXT VISIBILITY ONLY
========================================================================== */
[data-theme="dark"] .section-accent .kicker {
color: #FCC724;
}
[data-theme="dark"] .section-accent h2 {
color: #FDFEAD;
}
[data-theme="dark"] .section-accent .lead-text {
color: #FDFBD5;
}
[data-theme="dark"] .section-accent .btn-primary {
color: #1F1F1F;
}
[data-theme="dark"] .section-accent .btn-dark {
background-color: #FDFEAD;
color: #1F1F1F;
border-color: #FDFEAD;
}
/* ==========================================================================
MOBILE — REGISTER BRAND + BACK TO WEBSITE
320px — 767px
========================================================================== */
@media (max-width: 767px) {
.register-brand {
gap: 0.5rem;
}
.register-brand-mark {
width: 40px;
height: 40px;
flex: 0 0 40px;
}
.register-brand-mark i {
font-size: 0.9rem;
}
.register-brand-text strong {
font-size: 1rem;
line-height: 1.05;
}
.register-brand-text small {
font-size: 0.62rem;
line-height: 1.15;
}
.login-website-link {
font-size: 0.72rem;
line-height: 1.15;
gap: 0.35rem;
padding: 0.55rem 0.7rem;
}
.login-website-link i {
font-size: 0.65rem;
}
}
/* ==========================================================================
EXTRA SMALL MOBILE — 320px to 360px
========================================================================== */
@media (max-width: 360px) {
.register-brand {
gap: 0.35rem;
}
.register-brand-mark {
width: 34px;
height: 34px;
flex: 0 0 34px;
}
.register-brand-mark i {
font-size: 0.75rem;
}
.register-brand-text strong {
font-size: 0.85rem;
line-height: 1.05;
}
.register-brand-text small {
font-size: 0.55rem;
line-height: 1.1;
}
.login-website-link {
font-size: 0.64rem;
gap: 0.25rem;
padding: 0.45rem 0.55rem;
}
.login-website-link i {
font-size: 0.55rem;
}
}
@media (max-width: 768px) {
.register-brand {
gap: 0.35rem;
}
.register-brand-mark {
width: 34px;
height: 34px;
flex: 0 0 34px;
}
.register-brand-mark i {
font-size: 0.75rem;
}
.register-brand-text strong {
font-size: 0.85rem;
line-height: 1.05;
}
.register-brand-text small {
font-size: 0.55rem;
line-height: 1.1;
}
.login-website-link {
font-size: 0.64rem;
gap: 0.25rem;
padding: 0.45rem 0.55rem;
}
.login-website-link i {
font-size: 0.55rem;
}
}
/* ==========================================================================
DASHBOARD NAVBAR — ISOLATED STYLE
Only affects #siteHeader
========================================================================== */
#siteHeader {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
}
#siteHeader .navbar-container {
width: 100%;
min-height: 76px;
padding: 0 2rem;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
/* ==========================================================================
LOGO
========================================================================== */
#siteHeader .site-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
flex-shrink: 0;
min-width: 0;
text-decoration: none;
visibility: visible;
opacity: 1;
}
#siteHeader .site-logo .logo-mark {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#siteHeader .site-logo .logo-mark i {
font-size: 1rem;
}
#siteHeader .site-logo .logo-text {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
#siteHeader .site-logo .brand-name {
display: block;
font-size: 1.15rem;
line-height: 1.1;
white-space: nowrap;
}
#siteHeader .site-logo .brand-tagline {
display: block;
font-size: 0.65rem;
line-height: 1.2;
white-space: nowrap;
}
/* ==========================================================================
UTILITY ICONS
========================================================================== */
#siteHeader .nav-utilities {
margin-left: auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
flex-shrink: 0;
}
#siteHeader .nav-utilities .btn-icon {
width: 42px;
height: 42px;
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 50%;
background: transparent;
color: var(--color-primary, #CD8B09);
text-decoration: none;
cursor: pointer;
flex-shrink: 0;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
#siteHeader .nav-utilities .btn-icon i {
font-size: 0.95rem;
line-height: 1;
}
#siteHeader .nav-utilities .btn-icon:hover {
background-color: rgba(233, 164, 19, 0.10);
border-color: rgba(205, 139, 9, 0.20);
}
#siteHeader .nav-utilities .btn-icon:active {
transform: scale(0.96);
}
/* ==========================================================================
MOBILE — 320px TO 767px
========================================================================== */
@media (max-width: 767px) {
#siteHeader .navbar-container {
min-height: 64px;
padding: 0 0.75rem;
gap: 0.5rem;
}
/* Logo */
#siteHeader .site-logo {
gap: 0.45rem;
min-width: 0;
}
#siteHeader .site-logo .logo-mark {
width: 30px;
height: 30px;
}
#siteHeader .site-logo .logo-mark i {
font-size: 0.85rem;
}
#siteHeader .site-logo .logo-text {
min-width: 0;
}
#siteHeader .site-logo .brand-name {
font-size: 0.95rem;
line-height: 1.1;
white-space: nowrap;
}
#siteHeader .site-logo .brand-tagline {
font-size: 0.58rem;
line-height: 1.1;
white-space: nowrap;
}
/* Utility Icons */
#siteHeader .nav-utilities {
gap: 0.5rem;
flex-shrink: 0;
}
#siteHeader .nav-utilities .btn-icon {
width: 34px;
height: 34px;
}
#siteHeader .nav-utilities .btn-icon i {
font-size: 0.82rem;
}
}
/* ==========================================================================
EXTRA SMALL MOBILE — 320px TO 380px
========================================================================== */
@media (max-width: 380px) {
#siteHeader .navbar-container {
padding: 0 0.6rem;
}
/* Logo */
#siteHeader .site-logo {
gap: 0.35rem;
}
#siteHeader .site-logo .logo-mark {
width: 28px;
height: 28px;
}
#siteHeader .site-logo .logo-mark i {
font-size: 0.78rem;
}
#siteHeader .site-logo .brand-name {
font-size: 0.88rem;
}
#siteHeader .site-logo .brand-tagline {
font-size: 0.52rem;
}
/* Utility Icons */
#siteHeader .nav-utilities {
gap: 0.35rem;
}
#siteHeader .nav-utilities .btn-icon {
width: 32px;
height: 32px;
}
#siteHeader .nav-utilities .btn-icon i {
font-size: 0.76rem;
}
}
@media (max-width: 767px) {
#siteHeader .nav-utilities {
gap: 0;
}
#siteHeader .nav-utilities .btn-icon {
width: 32px;
height: 32px;
}
}
@media (max-width: 380px) {
#siteHeader .nav-utilities {
gap: 0;
}
#siteHeader .nav-utilities .btn-icon {
width: 30px;
height: 30px;
}
}
/* ==========================================================================
LOGIN PAGE — TOP ROW
Brand + Theme / RTL Utilities
========================================================================== */
/* --------------------------------------------------------------------------
Desktop
-------------------------------------------------------------------------- */
.login-form-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 1rem;
}
.login-form-top .register-brand {
flex: 0 1 auto;
min-width: 0;
}
.login-form-top .login-page-utilities {
display: flex;
flex-direction: row;
align-items: center;
flex: 0 0 auto;
/* Keep the existing Theme ↔ RTL spacing unchanged */
}
/* --------------------------------------------------------------------------
Tablet
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.login-form-top {
gap: 0.85rem;
}
}
/* --------------------------------------------------------------------------
Mobile
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.login-form-top {
gap: 0.65rem;
}
}
/* --------------------------------------------------------------------------
Very Small Mobile
-------------------------------------------------------------------------- */
@media (max-width: 480px) {
.login-form-top {
gap: 0.4rem;
}
}
.login-form-top .login-page-utilities {
display: flex;
flex-direction: row;
align-items: center;
flex: 0 0 auto;
/* Move the utility group slightly upward */
position: relative;
top: -1.3rem;
}
.login-form-top .login-page-utilities .btn-icon {
width: auto;
height: auto;
min-width: 0;
min-height: 0;
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: #E9A413;
}
.login-form-top .login-page-utilities {
gap: 1rem;
}
.login-form-top .login-page-utilities {
margin-right: 1rem;
}
/* ===================== END JOIN AS CHEF RESPONSIVE ======================= */