Sarah-W Posted October 2, 2020 Share Posted October 2, 2020 Hi, I have 2 sections on a page. Top is for desktop, bottom is for mobile. I successfully hid the top section in mobile view thanks to code found here. I now need to hide the bottom section in desktop view. This is the code that I used to hide for mobile /* this code for tablet - mobile */ @media screen and (max-width:640px) { [data-section-id="5f168cff92f0a40baa399208"]{ display: none; } } Now trying to hide this section on desktop <article class="sections" data-page-sections="5f168bd06a769b073e0558ae" id="sections"> Thanks, I appreciate your help. Link to comment
tuanphan Posted October 2, 2020 Share Posted October 2, 2020 Add to Home > design > Custom CSS /* Hide this on Mobile */ @media screen and (max-width:767px) { [data-section-id="enter-id-here"] { display: none; } } /* Hide this on Tablet - Desktop */ @media screen and (min-width:768px) { [data-section-id="enter-id2-here"] { display: none; } } Find data section id with this tool. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en GraeMedia and traisthomesinc 2 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Sarah-W Posted October 3, 2020 Author Share Posted October 3, 2020 That worked perfectly. Thank you Tuan! The tool you linked to is a big help too. Link to comment
RolandFuseHub Posted October 5, 2020 Share Posted October 5, 2020 If you are looking to hide a complete section and show it with a button or text, check out this plugin: https://www.fusehub.ca/expand-sections Yaya - Slide Video.mp4 I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10. Link to comment
ZABS860 Posted August 27, 2022 Share Posted August 27, 2022 Is it possible to show a section on Mobile AND tablet but not desktop? I'm using this to show a spacer on mobile but hide it on desktop, but I really need it to show on tablet as well. Link to comment
tuanphan Posted August 29, 2022 Share Posted August 29, 2022 On 8/28/2022 at 6:50 AM, ZABS860 said: Is it possible to show a section on Mobile AND tablet but not desktop? I'm using this to show a spacer on mobile but hide it on desktop, but I really need it to show on tablet as well. Yes. If you share link to page where you use section, we can give some code to achieve this Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ZABS860 Posted August 29, 2022 Share Posted August 29, 2022 Sending you a message now Link to comment
krtsfbk Posted October 11, 2023 Share Posted October 11, 2023 Hi there, is it possible to keep a section but hide BOTH on mobile and tablet? Link to comment
tuanphan Posted December 23, 2023 Share Posted December 23, 2023 On 10/11/2023 at 4:43 PM, krtsfbk said: Hi there, is it possible to keep a section but hide BOTH on mobile and tablet? Just use this CSS code @media screen and (max-width:991px) { [data-section-id="enter id here"] { display: none !important; } } Use this free tool to find data section id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
danicasamuel Posted March 20 Share Posted March 20 Hello, the landing page for each blog provides a built-in summary of all the posts. I'd like to hide this section and design my own summary of blog posts that's not limited to Squarespace's design. When I use the CSS code (below), the content within my blog posts starts disappearing too. Is there a way I can hide this section without my content disappearing? Please help section[data-section-id="631be0428f71a31aacf70a54"] { display: none; } Link to comment
tuanphan Posted March 21 Share Posted March 21 14 hours ago, danicasamuel said: Hello, the landing page for each blog provides a built-in summary of all the posts. I'd like to hide this section and design my own summary of blog posts that's not limited to Squarespace's design. When I use the CSS code (below), the content within my blog posts starts disappearing too. Is there a way I can hide this section without my content disappearing? Please help section[data-section-id="631be0428f71a31aacf70a54"] { display: none; } Can you share link to this page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
danicasamuel Posted March 21 Share Posted March 21 Hi @tuanphan thanks for the reply. The link is https://www.vainqueurmag.ca/runway Link to comment
tuanphan Posted March 24 Share Posted March 24 On 3/21/2024 at 10:06 AM, danicasamuel said: Hi @tuanphan thanks for the reply. The link is https://www.vainqueurmag.ca/runway You can use this new CSS code body.view-list section[data-section-id="631be0428f71a31aacf70a54"] { display: none; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
josephjamesphot Posted October 28 Share Posted October 28 I am using this code and they seem to be working against each other. Both sections now show up on mobile and desktop. If I only use the top code then it hides the desktop successfully on mobile but the mobile still shows on desktop. Please help... /* Hiding the desktop header on mobile*/ @media screen and (max-width: 767px) {section[data-section-id="6706c91ce1fdfb327f5d0e13"] { display:none !important; } /* Hiding the mobile header on desktop*/ @media screen and (min-width: 768px) {section[data-section-id="6706c91ce1fdfb327f5d0e13"] { display:none !important; } Link to comment
tuanphan Posted October 28 Share Posted October 28 4 hours ago, josephjamesphot said: I am using this code and they seem to be working against each other. Both sections now show up on mobile and desktop. If I only use the top code then it hides the desktop successfully on mobile but the mobile still shows on desktop. Please help... /* Hiding the desktop header on mobile*/ @media screen and (max-width: 767px) {section[data-section-id="6706c91ce1fdfb327f5d0e13"] { display:none !important; } /* Hiding the mobile header on desktop*/ @media screen and (min-width: 768px) {section[data-section-id="6706c91ce1fdfb327f5d0e13"] { display:none !important; } You should share site url, we can check easier, or follow this Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
josephjamesphot Posted Sunday at 07:57 PM Share Posted Sunday at 07:57 PM Here you go https://www.kyro.foundation/ Link to comment
tuanphan Posted Monday at 08:49 AM Share Posted Monday at 08:49 AM 12 hours ago, josephjamesphot said: Here you go https://www.kyro.foundation/ I see first - second slideshow Now you want: Show first slideshow on Desktop, show second slideshow on Mobile? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
josephjamesphot Posted Monday at 03:54 PM Share Posted Monday at 03:54 PM Yes, i actually had it hidden on mobile before, but now it shows both on both. I need to have the mobile optimized on the mobile and desktop on desktop. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment