Full page home JPG on mobil phone DAWN theme

Store Design
1

hi i want to make coming soon landing page with jpg

i already remove footer and header using below code from forum

<style>
.header-wrapper{
    display: none !important;
}

footer.footer{
    display: none !important;
}
</style>

it working Full page on desktop

but on mobil phone its still have white space on below part

so i want to remove that white part on phone so it looks full like on desktop

website: yokotajapan.com

mobile yokota.jpg
mobile yokota.jpg745×1413 47.4 KB

2

Hi @v10plus ,

This is David at SalesHunterThemes.

If you want your mobile device full screen to look like a desktop. You can let the banner take up 100vh

@media screen and (max-width: 749px)
{
  #Banner-template--21115723841857__image_banner.banner {
    height: 100vh;
  }    
}

result:

David_SHT_0-1695088236303.png
David_SHT_0-1695088236303.png822×1824 150 KB

But since you are making a landing page, I think you can also refer:

@media screen and (max-width: 749px)
{
  .banner .banner__content{
    height: 100vh;
  }
  .banner .banner__media{
    background: #000;
  }
  .banner__media.media img {
    object-fit: contain;
  }    
}

result:

David_SHT_0-1695088700391.png
David_SHT_0-1695088700391.png776×1684 93 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team.

3

hi

if i want use this code

where i put it?

@media screen and (max-width: 749px)
{
  .banner .banner__content{
    height: 100vh;
  }
  .banner .banner__media{
    background: #000;
  }
  .banner__media.media img {
    object-fit: contain;
  }    
}
4

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

5

Hi @v10plus ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly