Jump to content

CSS to hide section for responsive design

Recommended Posts

I have a background video for my desktop. However, it doesn't work for my mobile background... so I made a vertical version.

https://laserlight.house/

As per direction I read on a previous post to this feed, I have duplicated the section and added the mobile version in there.

Then I put the following css in custom css in settings, but now it shows the desktop video on the desktop (yay!), but both videos on mobile (boo!).

@media screen and (max-width:1024px) {
  [section-data-section-id="63f92211ba57b758b1a91dd2"] {
    display: none !important;
  }
}

@media screen and (min-width:1025px) {
  [data-section-id="63fcc92ea4186c086c767f8b"] {
    display: none !important;
  }
}

What code is wrong? 

Desktop Showing 1 Video:

image.thumb.png.281da314fcc047990a404d32e69322c9.png

Mobile Showing 2 Videos:

image.thumb.png.97dba283050aa14c99cf1766393ea9fe.png

Link to comment
  • Replies 3
  • Views 467
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Need site login detail. can't fix without seen the code.

Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com

Website:-  dhanjalsolution.com

Best Hourly Rate :- $15 Per Hour

Link to comment

You can try the following code to hide the first video on mobile

@media only screen and (max-width: 1024px) {
  section[data-section-id="63f92211ba57b758b1a91dd2"] {
    display: none;
  }
}

Support me by pressing 👍  or marking as the solution if this is useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.png.8a4d067cd55557a6fbc5e0516d34718a.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.