Jump to content

Index Gallery Fill Screen On Mobile

Recommended Posts

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! 

 



 

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

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!

 




 

Link to comment
  • 2 weeks later...

Try adding to Page Header

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.