How can I resize my homepage photo to fill the entire desktop screen?

Shopify Discussion

Topic summary

A user wants to make their homepage photo fill the entire desktop screen and fix a button positioning issue where it doesn’t appear centered.

Solutions provided:

  • CSS approach: Add code to the base.css file using @media screen and (min-width: 993px) to set banner height to 100vh (full viewport height). Additional CSS includes positioning adjustments with position: absolute, top: 50%, and transform: translateY(-50%) for centering content.

  • Alternative method: Navigate to Online Store → Edit Code → Find theme.liquid file, then add specific code above the </Head> tag.

Both solutions involve editing theme files directly. The discussion appears to address both the full-screen image request and the button centering issue simultaneously.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

i want my home page photo to be bigger so it takes up the whole screen on my desktop. how can i do this? also on mobile the button does not appear in the middle. any help?

WEBSITE LINK: https://askari.store/

2

Hi @askari4p

Please add this CSS code at the bottom of your base.css file

@media screen and (min-width: 993px) {
.banner { height: 100vh; }
}
@media screen and (max-width: 749px) {
.banner__content {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
}
}
1 Like
3

Hi @askari4p

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag