Index Gallery Fill Screen On Mobile

Site URL: https://www.thebigromance.ie/select

Hey all,
Having some trouble on site if anyone can offer a suggestion. It's working fine on desktop, but on mobile in stacked view i'd like both images to fill the screen rather than have to scroll to see both. 

You can view it here: 
https://www.thebigromance.ie/select

Code i've used to fill screen on Desktop so far is: 

.Index-gallery-item {
height: 100vh !important;}

.homepage article.Index-gallery-item 
{height: 100vh !important;}

Any help would be great, can't quite figure it out. 

Thanks! 

This may help explain better

Hi,

Can you share link to page in screenshot? We can help easier

Oh Hey Tuan, 
Hope you're well. 
Sure. You can see it at : https://www.thebigromance.ie/select

I have it working a bit better now, but on mobile you still have to scroll up and down a bit.
I have '44vh' as the height but if there was a way of getting it to fit automatically that would be better. 

The code i'm using at the moment is: 

// * * * SELECT PAGE * * * //

.Index-gallery-item
{height: 100vh !important;}

@media screen and (max-width:800px) {
  .Index-gallery-item
  {height: 44vh !important;}}

/* SIZE: hide footer */
.Footer-inner 
{display: none !important;}

(There is other code relating to font sizes & overlays but I removed as that doesn't really relate)


Thanks!

 

Hey all, 
Just seeing if anyone had anymore thoughts on this. 
 

Thanks

Try adding to Page Header

<style>
  @media screen and (max-width:800px) {
  .Index-gallery-item {
    height: 45vh !important;
}
    html, body {overflow: hidden;}
  }
</style>

Hey Tuan, 
Didn't seem to work but I think it's probably ok now. A lot better than when I started it. 
Thanks again for your help!