can someone help with? i want my image in collage fit the whole screen in width on mobile and on pc.
I use the theme dawn
https://c2efcd-77.myshopify.com/
password: 123
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.
2 Likes
Hi @LeuchTii1337 ,
Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
.section-template--23331434168650__collage_VF4rXR-padding {
padding: 0;
max-width: none;
}
Hi @LeuchTii1337 ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
Hi @LeuchTii1337 ,
If you have any questions, you can contact me directly.
Nice to meet you 
that worked thx but there is a quality loss on the image why?
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
Here is result:
Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
- Here is the solution for you @LeuchTii1337
- Please follow these steps:
- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
.section-template--23331434168650__collage_VF4rXR-padding {
padding: 0 !important;
max-width: 100% !important;
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
it worked but there is a massive quality loss why?
Hi @LeuchTii1337 ,
I have checked and the image is responsive to the browser width, so if you want to display the exact size, please send me the code of the collage.liquid file, i will guide you to change it
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.