Hi there, please check the page below:
https://empiricalwater.com/pages/readme
On desktop only, the banner is too wide. I don’t intend for it to be a banner, it just needs to be about 900 px wide. The full image must be visible, not cropped. Thanks.
Topic summary
A user seeks help narrowing an image banner to approximately 900px width on desktop only, while keeping the full image visible and uncropped.
Proposed Solution:
- Edit the theme.liquid file in Shopify Admin → Online Store → Theme → Edit code
- Add CSS within
<style>tags inside the<head>section - Use a media query targeting screens with min-width 750px
- Apply
width: 900pxandmargin: 0 autoto the.banner.banner--content-align-centerclass
Current Status:
The initial implementation failed. A screenshot shows the code was placed inside a <script> tag instead of outside it. The helper clarified the CSS should be written outside the script tag and provided a corrected screenshot showing proper placement.
The discussion remains ongoing as the user works to implement the corrected solution.
Hi @empiricalarby ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Inside head tags. You need create style tags. After insert my code inside style tags
@media screen and (min-width: 750px) {
.banner.banner--content-align-center {
width: 900px !important;
margin: 0 auto !important;
}
}
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 
1 Like
Hi @empiricalarby , Pls write it outside the script tag
2 Likes