Because all the instructions stretch the image, forcing a change to it’s aspect ratio.
Either add a larger width image, or the above styles need to be adjusted to change the background attachment type, or other methods to avoid resolution issues.
Topic summary
Goal: make a Dawn theme Collage image span full browser width on mobile and desktop.
What was done:
- CSS added to the theme’s stylesheet (base.css/theme.css) targeting the specific Collage section class to remove padding and width constraints (padding: 0; max-width: none/100%).
- Result: the Collage now renders full-width, confirmed by screenshots.
New issue:
- Significant image quality loss after the change.
Analysis and guidance:
- The full-width styles are stretching the image, altering aspect ratio and/or upscaling beyond the source resolution, which degrades quality.
- Proposed remedies: upload a higher-resolution source image; adjust styles to avoid distortion (e.g., change background handling/attachment type); or modify the Collage template to display the image at its intrinsic/exact size.
- A request was made to share the collage.liquid section code for precise, non-distorting adjustments.
Status:
- Full-width display achieved, but quality issue remains unresolved.
- Next step is to review collage.liquid and/or replace with a higher-resolution asset to preserve sharpness.
Notes:
- “Dawn” is Shopify’s default theme; “collage.liquid” is the Collage section template.
- Attached screenshots illustrate the before/after full-width effect and the quality concern.