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.
1

https://www.koryoclothing.com/ // password: parola
This is the site. With some help from another post I have made the image banner full screen on mobile, but I still didn’t figured it out on desktop

This is the code I used to get the mobile picture fullscreen. ( I added this code in the custom CSS tab on the theme customizer )

@media screen and (max-width: 749px) {
.banner–large:not(.banner–mobile-bottom):not(.banner–adapt)
.banner__content {
min-height: 100vh;
}
}

1 Like
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
3

Thank you, it worked!

1 Like
4

Glad to help you. Have a good day.