Jump to content

Hide page banners on mobile, Brine template

Recommended Posts

Site URL: http://silverfinbb.com/

Hello,

The Home page looks fine on mobile, but on the other site pages all the page banner images display poorly on mobile. I would like to hide the page banner section and image on select pages. I have spent a couple of hours googling css code to do this, and nothing has worked so I must have something basic wrong. I have tried adding code in the Custom CSS section, as well as the Advanced Page Settings for the individual pages.

I have attached a screenshot of the site on an iphone as an example. I would like the image that shows a portion of blue sky hidden, so you just see the hamburger and site name on the top, and then the first text block beneath that.

The site uses the Brine template, SquareSpace 7.0.

I would appreciate it SO MUCH if someone could help me out.

Thank You!

IMG_D16E3DEE29B4-1.jpeg

 

UPDATE: While waiting for a response, I used my browser's "Inspect Elements" to play around. I determined that the area with the sky image was called ".Intro-content". Based on what I saw other people doing, I added the following code to my Design>Custom CSS section:

 

@media only screen and (max-width: 640px){
    /*hide mobile header*/
    .Intro-content {
      display:none;
    }
}
 

This resulted in the image not displaying. There's more white space than I would like, but at least the image is gone. I don't know if this was the right way to do this, but I will leave it here in case it helps someone in the future. Attaching a current screenshot with the fix.

IMG_AADC14853EAD-1.jpeg

Edited by SHMERSH
duplicate site info, added screenshot; Update
Link to comment
  • Replies 1
  • Views 122
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.