Jump to content

Hide background (banner) image on mobile while also re-organizing section with CSS in SquareSpace 7.0

Recommended Posts

Trying to optimize for mobile, I have some code in the first section of the page that I'm trying to use to:

  1. Hide the desktop background image
  2. Replace the image with a new one on mobile
  3. Re-organizing the section to stack the images/text, etc. instead of displaying as a background

So far, I have the new image showing up on mobile, and the elements are stacking via the flex code. But, I can't for the life of me figure out how to hide the original background image in the desktop version. I've tried every variation of the code I can find (using opacity, hidden tag, etc.) and can't seem to get it to disappear. Here is the code in question as I have it now, any ideas on how to get this to work in 7.0?

 

<style> 
@media screen and (max-width:640px) {

#section-background img {opacity: .1;}
  
#new-page-4 {
  min-height:initial !important;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  background-color:#fff; //change as needed
  -webkit-box-orient:vertical;
  -webkit-box-direction:reverse;
      -ms-flex-direction:column-reverse;
          flex-direction:column-reverse;
  
  .Index-page-image {
    position:relative;
    height:40vh;
    background-image: url(https://static1.squarespace.com/static/606b7f0d50868d69372d1aed/t/645520402e00c8148fedcbda/1683300418222/banner-image-woman-on-laptop-mobile.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 99;
  }
  
  .Index-page-content {
    min-height:initial !important;
    padding-top:10px;
  }

  h1,h2, h3,p {
   color:white;
 }
  
}
}
</style>

 

Edited by MasonCreative
include site URL
Link to comment
  • Replies 3
  • Views 377
  • Created
  • Last Reply

Top Posters In This Topic

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.