Full page home JPG on mobil phone DAWN theme

v10plus
Excursionist
40 0 6

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

Replies 4 (4)

David_SHT
Globetrotter
605 125 124

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

 

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

 

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

David | SalesHunterThemes team.

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

v10plus
Excursionist
40 0 6

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;
  }    
}

 

David_SHT
Globetrotter
605 125 124

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.

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

PageFly-Oliver
Astronaut
878 190 171

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

 

<style>
@media (max-width: 767px){
.banner__content{
    height: 100vh !important;
  }
 .banner__media{
    background: #000;
  }
  .banner__media.media img {
    object-fit: contain !important;
  }    
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.