Trying to hide just the image but not the text boxes/buttons in image banner on mobile

Hey there, im trying to get just the image to hide on my image banner (button and text are still visible) only on mobile. so on desktop you see it, mobile you dont.

if thats not possible, then i need to figure out a way to move the text boxes and button down on mobile because they are overlapping horribly.

My intention for the aesthetic on the landing page is a no scroll single page. if you notice it has the video background with the transparencies and looks great. minus the one flaw with the mobile version.

Hello @Ascension1111

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

will this link work?

https://1dpnueuz7kaxs0rp-71277969692.shopifypreview.com

if i cant get this functional ill probably just end up using wordpress for the home page and redirecting to shopify as the subdomain. the biggest reason for wanting to use shopify is the token gating features and web 3 integrations and i dont want to lose out on that functionality. if you have any advice please let me know!

Hello @Ascension1111

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store β†’ Theme β†’ Edit code

  2. Open your base.css file and paste the following code below:

@media only screen and (max-width: 767px){
  .banner__media.media{
    display: none !important;
  }
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

that worked perfectly! thank you so much!

now the question is how to shorten up the page so its a no scroll for both desktop and mobile. the footer takes up quite a bit of space

I am glad that my solution is helpful to you :heart_eyes: .