How to make an image full screen on both ( desktop + mobile )

Technical Q&A
, ,

Topic summary

A user needed help making an image banner display full screen on both desktop and mobile devices for their Shopify site. They had already achieved full-screen display on mobile using custom CSS code added to the theme customizer, but desktop remained an issue.

Solution provided:

  • Locate and edit the theme.liquid file
  • Add specific code before the closing tag
  • Save the changes

The solution successfully resolved the issue, with the user confirming it worked. Screenshots were shared showing the implementation steps and expected result.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
2
  • Here is the solution for you @Ali2222
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
  • Here is the result you will achieve:

BSSTekLabs_0-1725892824328.png
BSSTekLabs_0-1725892824328.png1920×920 637 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like