How do I add text over an index gallery on my Landing Page?

Site URL: https://www.marinocarrabs.com/

What I am looking to do is, on my landing page I would like to have a block of text saying what I do.  For example " Animator & photographer".  I would like to have this text over the index gallery that I currently have now.  Underneath that I would like to put a button that says "Enter" or "portfolio. Is that possible to do?  I would like it all on one index page and stacked over the Gallery of images.  I am using the Brine template for this site.

https://www.marinocarrabs.com/

Thank you!

Hi. Can you disable gallery autoplay? We can check easier

@tuanphan autoplay is now disabled.

Bump

Bump

Bump

Would it be best to not use an index gallery?

Tried creating a new index page with an index gallery, another page underneath with text.

https://www.marinocarrabs.com/new-index-1

Let's try this for the new index page you created.

Fist remove, make a copy somewhere, these two CSS rule-sets.

#block-603a8078ca355d0ac5d87ee6 {
    z-index: 99;
    position: fixed;
    top: 50%
}

#block-yui_3_17_2_1_1614450093783_9404 {
    position: fixed;
    top: 54%;
    z-index: 99
}

Add this CSS.

#new-page .sqs-row .sqs-col-12 {

  position : fixed;
  top : 45%;
  z-index : 99;
  
  }

This moves the text and button blocks as a unit.

The text is scrunched up at larger screen sizes as you have a rule-set that sets the line-height to zero.

Seems like the gallery with the moved second page content is working so far. I'd say keep on and see where it takes you.

@creedon Thank you for the feedback.  I added that CSS to the page.  I am trying to keep it all centered, does it look centered (Name, Text and Social Icons).

Thanks!

You could try adding this CSS to center things.

/* begin centering new page */

  #collection-603a71a3dea190701a92f13f .Header-branding {
  
    margin-left : 0;
    
    }
    
  #new-page .sqs-layout > .sqs-row {
  
    margin-left : 0;
    margin-right : 0;
    
    }
    
  [class*=sqs-col] #block-603a8078ca355d0ac5d87ee6.sqs-block {
  
    padding-right : 0;
    
    }
    
  [class*=sqs-col] #block-yui_3_17_2_1_1614450093783_9404.sqs-block {
  
    padding-left : 0;
    
    }
    
  /* end centering new page */

Let us know how it goes.

@creedon  Thank you for the help.  I am now trying to have a video auto play in the index gallery but I can't seem to make it work no matter what I try.  Does auto play not work in an index gallery?