Jump to content

Needing help to hide a block from Mobile View

Go to solution Solved by Ziggy,

Recommended Posts

Hi all,

I am new here, my manager has decided to create a rotating banner with text embedded on the images, there are a total of 3 slides that rotate automatically.

However, this does not display properly on the Mobile View, so I want to remove the block only for the Mobile View.

Below is the code that I am using but I seem to have trouble removing the block.

Am I using the wrong configuration or the wrong ID?

<script>
@media only screen and (min-width: 720px) {
  #block-yui_3_17_2_1_1710192540269_931 {
    display: none !important;
  }
}
</script>

The website is yet to be published so I am wondering if that's why it is causing this problem. The web designer is unable to help because she doesn't have coding experience.

The website is here

The password to access the site is "organicbioactives"

Appreciate anyone who can take a peek and let me know how I can code better!

Edited by Sylverian
Adding website information.
Link to comment
  • Replies 2
  • Views 911
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution
11 hours ago, Sylverian said:

The website is yet to be published so I am wondering if that's why it is causing this problem. The web designer is unable to help because she doesn't have coding experience.

The code you are using is style code rather than a script. You also have the wrong breakpoint value for mobile and you are using min instead of max (max will apply to all screen-size values below 767px)

If you are putting this into the page header code injection it should look like this:

<style>
@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1710192540269_931 {
    display: none !important;
  }
}
</style>

But you could put it in the Custom CSS panel as that's easier to edit, and if you do that you don't need any tags so it would look like this:

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

I hope that helps!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.