Homepage Banner Requirements — Sessions Cannabis

1The one rule that keeps it premium

Fix the height for each screen size, let the width flow, and design a centered safe zone for the important content. A hero that never distorts works like a movie shot. The artwork is wider than what is guaranteed to be visible, and the essentials, the logo, the product cluster, and the Shop Now button, all live inside a centered safe zone that never gets cut off. Everything outside that zone, the splashes, waves, and sky, is bleed that is allowed to trim on wider or narrower screens.

2Sizes to hand your designer

Design every file at 2x so it stays crisp on retina and high resolution screens. The Delivery column is the pixel file you request. The Renders At column is the size it shows on screen.

Breakpoint	Delivery file (2x)	Renders at	Container height	Notes
Desktop 1024 to 1439 px	2880 × 1040	1440 × 520	520 px	Full width, image set to cover and centered.
Wide desktop 1440 px and up	3840 × 1040	1920 × 520	520 px	Same artwork, background extended further left and right so 4K and iMac screens never show an edge.
Tablet 768 to 1023 px	1536 × 920	768 × 460	460 px	Pull the product cluster toward the center and scale it down slightly.
Mobile 0 to 767 px	1500 × 1600	750 × 800	about 480 px	A separate vertical layout. Logo on top, product in the middle, button at the bottom.

3Wireframes for each size

The dashed white box is the safe zone. The logo, product cluster, and Shop Now button must always sit inside it. The colored area outside is bleed and can crop.

Desktop and Wide desktop · 2880 × 1040 and 3840 × 1040 · same horizontal layout

DELIVERY 2880 × 1040 (shows 1440 × 520) ◀ extra bleed extra bleed ▶

Safe zone · center 1200 px · 100 px padding

LOGOShop Now

PRODUCT CLUSTER

Tablet · 1536 × 920

1536 × 920

Safe zone

LOGOShop Now

PRODUCT

Mobile · 1500 × 1600 · recomposed vertically

1500 × 1600

LOGOPRODUCTShop Now

4CTA conditions

The Shop Now button is the whole point of the banner, so it has its own rules. These apply to every partner brand.

One button only. A single clear Shop Now, never two competing buttons in the same banner.
Position. Keep it in the lower part of the safe zone. On desktop it sits low left or low right next to the product. On mobile it sits at the bottom, centered.
Size. The button must read and tap easily. At least the height of a fingertip, roughly 44 px tall at display size, with a short label like Shop Now or Shop SHRED.
Contrast. Put the button on a solid or softly shaded plate when the art behind it is busy, so it never gets lost in the splashes.
Inside the safe zone. The button never sits near the outer edges, because those edges crop on different screens.
Live button preferred for partners. Deliver the background art without the button baked in, and we place a real, clickable Sessions button on top. That lets us point each partner banner at the right link and track clicks. A fully baked button is fine too if you want the exact designer look, but then it cannot be clicked or measured.

5Do and Don't for each file

A quick check for every file before you send it. Each rule shows the right way, the common mistake, and the reason it matters.

Desktop file shape

✓ Do

Wide 2880 × 1040
content centered

Deliver the exact wide shape. It drops into the hero band and fills it with cover, no distortion.

✗ Don't

Square or random ratio
forced to fit

Do not send a square or off ratio file and expect the code to stretch it to fit.

Why it matters. The hero slot is a fixed wide band. A file that matches its shape fills it cleanly. A mismatched shape either stretches, which looks cheap, or crops into the product.

Mobile layout

✓ Do

Vertical
1500 × 1600

Design a separate tall file for phones with the logo, product and button stacked top to bottom.

✗ Don't

Desktop wide file
shrunk to phone

Do not reuse the wide desktop file on mobile. Everything becomes tiny and unreadable.

Why it matters. A wide movie shape squeezed into a narrow phone makes the product and the button too small to see or tap. Mobile needs its own art direction.

Safe zone

✓ Do

Logo, product, button
held in the center

Keep every important element inside the center safe zone with clear padding top and bottom.

✗ Don't

Logo or button
near the far edge

Do not place the logo, product, or button close to the left, right, top, or bottom edge.

Why it matters. The outer edges are trimmed on wider and narrower screens. Anything placed there disappears on some devices.

Format and resolution

✓ Do

WebP + JPG
exported at 2x

Export WebP as the main file with a JPG backup, at 2x pixel dimensions.

✗ Don't

1x PNG screenshot
or a heavy 8 MB file

Do not send a small 1x screenshot or an enormous uncompressed file.

Why it matters. A 1x file looks soft on modern retina screens. A heavy file loads slowly and breaks the premium feel. WebP at 2x is sharp and fast.

6Drop in code for the source

The picture element with srcset lets the browser download only the correct file per device. The cover setting is what guarantees the image is never stretched.

<!-- serves the right file per screen size -->
<picture class="hero-banner">
  <source media="(max-width: 767px)"  srcset="hero-mobile.webp">
  <source media="(max-width: 1023px)" srcset="hero-tablet.webp">
  <source media="(max-width: 1439px)" srcset="hero-desktop.webp">
  <source media="(min-width: 1440px)" srcset="hero-desktop-xl.webp">
  <img src="hero-desktop.webp" alt="Sessions homepage banner, Shop Now">
</picture>

/* fixed height means no stretch */
.hero-banner img{ width:100%; height:520px; object-fit:cover; object-position:center; display:block; }
@media (max-width:1023px){ .hero-banner img{ height:460px; } }
@media (max-width:767px){  .hero-banner img{ height:auto; } }

7Deliverables checklist

One layered source file, Figma or PSD, for each of the four layouts.
Flattened exports at the exact 2x pixel sizes in the table above.
WebP as the main format with a JPG backup.
The mobile file is a genuinely recomposed vertical layout, not a scaled crop of the desktop.
All key content kept inside the center safe zone with room top and bottom.
Background art delivered without the button baked in, so we can place a live clickable Sessions button.
Colors within Sessions guidelines, warm orange, deep charcoal, and cream.