One scale for section widths
Every band of content on the site sits inside an invisible container that decides how wide it runs on large screens. On the current site those container widths were set one component at a time, and they drifted: the theme’s stylesheet source carries 59 different fixed widths (142 declarations) between 850px and 1500px, most of them within a few pixels of each other and visually identical.
The proposed scale
Each bar below is rendered at its actual width whenever your window is at least that wide; a narrower window caps the bar at its edge. Your browser window is currently … wide; maximize it on a large screen to see the full scale. These are large-screen widths; responsive behavior on phones and tablets is retained and verified separately during implementation.
Text sections, FAQs, article-style content. The reading column.
Card grids, link panels, galleries. Wider than text, framed by margin.
Page banners, brand grids, media library. The widest content size.
How editors choose these: Standard is simply the default; Wide is a one-click width option WordPress already provides; Feature is applied as a one-click style on the section. Nobody types pixel values anywhere.
Banners and heroes keep stretching edge to edge exactly as they do today; that backdrop is built into the banner sections rather than being a width anyone chooses, and the content inside them sits at one of the three sizes above.
Every fixed width in the legacy stylesheets, and where it lands
Each tick is one fixed width declared in the current theme’s stylesheet source; taller ticks are declared more often. The shaded zones show the proposed mapping: each width snaps to the size it already clusters around.
These are counts of widths written in the old theme’s stylesheets, not a page-by-page audit of the live site; borderline values are checked visually during the build.
Already-built sections
Components delivered so far, restated on the scale. Where a value changes, the change is listed and is confirmed with a side-by-side visual check during implementation.
| Component | Current rebuild max | Proposed | Notes |
|---|---|---|---|
| Spotlight story teaser | 960px | Standard, 960px | No change |
| Impact areas CTA grid | 1420px | Wide, 1420px | No change |
| Curated news cards | standard sizes | Standard / Wide | Already on the scale |
| Media download cards | standard sizes | Standard / Wide | Already on the scale |
| Logo summary row | 1020px | Standard, 960px | 60px narrower; confirmed side by side during the build |
| FAQ section | 1050px | Standard, 960px | Content already fits; spacing tightens slightly; confirmed side by side |
| Related links panel | 1200px | Feature, 1230px | No visible change expected; confirmed side by side |
| Three-up card grid | 1230px | Feature, 1230px | No change |
The homepage intro keeps its narrower text column; that is part of the homepage design, not a size editors choose.
The full mapping
Appendix: every legacy declaration and where it maps
Every fixed max-width declaration found in the legacy stylesheet source, grouped by proposed size. “Legacy stylesheet area” names the subject of the Sass file a declaration sits in; it does not by itself tie the value to a rebuilt component. “Verified rebuilt match” is filled in only where the specific selector was checked against a rebuilt component. Rows without one are page content that gets rebuilt with standard sections, or inner-element styling superseded by the rebuild. Declarations marked boundary sit between two sizes and are assigned after a side-by-side check during implementation.
Maps to Standard (960px): 49 declared widths, 128 declarations
| Legacy declaration | Count | Legacy stylesheet area | Verified rebuilt match |
|---|---|---|---|
| 850px | 2 | Sitewide base styles, Sustainability: food philosophy | — |
| 854px | 1 | Where We Serve | — |
| 860px | 1 | Supplier resources | — |
| 870px | 1 | Supplier training FAQs | — |
| 887px | 1 | Sustainability pages | — |
| 895px | 1 | Supplier resources | — |
| 900px | 1 | Supplier resources | — |
| 906px | 1 | Our Impact: inclusive workplace | — |
| 910px | 1 | Sitewide base styles | — |
| 921px | 1 | Serving shareholders | — |
| 938px | 1 | Giving Back pages | — |
| 940px | 13 | Giving Back pages (4), Sustainability: caring for animals (3), Sitewide base styles, Contact us, Our Impact: inclusive workplace, Our Impact: pathways to growth, Sustainability: food safety, Sustainability pages | — |
| 941px | 2 | Sitewide base styles, Sustainability pages | — |
| 942px | 1 | Sustainability: energy and water | — |
| 943px | 3 | Giving Back pages (2), Our Impact: inclusive workplace | — |
| 945px | 4 | Our Impact: inclusive workplace (3), Sustainability: food philosophy | — |
| 950px | 5 | Our Impact: inclusive workplace (2), Sitewide base styles, Careers: join our team, Sustainability: food philosophy | — |
| 952px | 1 | Serving shareholders | — |
| 960px | 33 | Our Impact: inclusive workplace (7), Serving our guests (4), Sitewide base styles (3), Giving Back pages (3), Sustainability: food philosophy (3), Gift cards (2), Our Impact: investing in success (2), Serving our team (2), Serving shareholders (2), Sustainability: energy and water, Sustainability: food safety, Our communities, Supplier resources, We Are Here | — |
| 961px | 1 | Sustainability pages | — |
| 970px | 1 | Terms and conditions | — |
| 976px | 1 | Supplier resources | — |
| 980px | 2 | Our Impact: pathways to growth, Sustainability: food philosophy | — |
| 988px | 1 | Our Impact: pathways to growth | — |
| 990px | 2 | Our Impact: investing in success, Sustainability: food safety | — |
| 995px | 1 | Giving Back pages | — |
| 1000px | 3 | Sustainability: taking action (3) | — |
| 1004px | 1 | Our Impact: inclusive workplace | — |
| 1006px | 1 | Our Impact: inclusive workplace | — |
| 1012px | 1 | Our Impact: investing in success | — |
| 1013px | 1 | Sustainability pages | — |
| 1020px | 4 | Darden supplier pages (2), Sitewide base styles, Sustainability: caring for animals | — |
| 1024px | 2 | Sustainability: food safety, Sustainability: taking action | — |
| 1035px | 2 | Sustainability: caring for animals, Sustainability: food philosophy | — |
| 1048px | 1 | Sustainability pages | — |
| 1050px | 6 | Sustainability: taking action (4), Sitewide base styles, Supplier training FAQs | FAQ section (FAQ container) |
| 1056px | 1 | Gift cards | — |
| 1060px | 4 | Sitewide base styles, About: values, Stories spotlight, Supplier resources | — |
| 1064px | 1 | Restaurant careers | — |
| 1065px | 1 | Gift cards | — |
| 1070px | 2 | Our Impact: inclusive workplace, Restaurant careers | — |
| 1080px ◦ boundary | 4 | Restaurant careers (2), Sitewide base styles, Supplier resources | — |
| 1088px ◦ boundary | 1 | Brand leadership bios | — |
| 1090px ◦ boundary | 1 | Sustainability: energy and water | — |
| 1095px ◦ boundary | 1 | Supplier training resources | — |
| 1100px ◦ boundary | 4 | Sitewide base styles, Giving Back pages, Our Impact: inclusive workplace, Sustainability: taking action | — |
| 1102px ◦ boundary | 1 | Our Impact: pathways to growth | — |
| 1110px ◦ boundary | 1 | Supplier resources | — |
| 1113px ◦ boundary | 1 | Sitewide base styles | — |
Maps to Feature (1230px): 7 declared widths, 8 declarations
| Legacy declaration | Count | Legacy stylesheet area | Verified rebuilt match |
|---|---|---|---|
| 1146px | 1 | Supplier resources | — |
| 1156px | 1 | Sitewide base styles | — |
| 1175px | 1 | Stories spotlight | — |
| 1180px | 1 | Inner-page banner | Inner-page banner (banner content container) |
| 1185px | 2 | Careers: benefits, Careers: five winning behaviors | — |
| 1200px | 1 | Corporate gift cards | — |
| 1230px | 1 | Sitewide base styles | Three-up card grid (three-column card layout) |
Maps to Wide (1420px): 3 declared widths, 6 declarations
| Legacy declaration | Count | Legacy stylesheet area | Verified rebuilt match |
|---|---|---|---|
| 1320px | 1 | Our Impact: inclusive workplace | — |
| 1328px | 1 | Serving shareholders | — |
| 1420px | 4 | Site chrome and account styles (2), Sitewide base styles, Media library | Media download cards (media library block) |