AnnieTimmins Posted July 2, 2019 Share Posted July 2, 2019 Hello!I'm using the Farro Template and have found that for several screen sizes (iPad, iPad Pro Portrait, Mobile Landscape) the nav and footer aren't responsive. Is there some code I can use that will detect when the Nav is running over two lines or overlapping itself/ other content and switch to the mobile menu?Failing this, just a mobile query for screen sizes 768px width or below that will switch to mobile design – I have tried some suggestions in other threads but they haven't worked for this template. Site: https://clownfish-maracas-6wwx.squarespace.com Link to comment
tuanphan Posted July 2, 2019 Share Posted July 2, 2019 @AnnieTimmins @media screen and (max-width:768px) { [data-nc-base="mobile-bar"] { display: block; } [data-nc-base="header"] { display: none; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AnnieTimmins Posted July 2, 2019 Author Share Posted July 2, 2019 Great thanks :) You're solving all my problems! Is there a simple solution for the footer and the about page as well? (I'd like the design to collapse to single column for these sections below 768px). Link to comment
AnnieTimmins Posted July 2, 2019 Author Share Posted July 2, 2019 Great thanks :) You're solving all my problems! Is there a simple solution for the footer and the about page as well? (I'd like the design to collapse to single column for these sections below 768px). Link to comment
tuanphan Posted July 3, 2019 Share Posted July 3, 2019 @AnnieTimmins I see footer/about page is normal. Can you describe details (screenshot is better)? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AnnieTimmins Posted July 3, 2019 Author Share Posted July 3, 2019 @tuanphan My mistake, I meant to say contact page. Screen shot attached, the text overlaps rather than collapsing to 1 x column. The footer is still legible but messy. Would prefer for it to collapse to 1 x column too. Link to comment
tuanphan Posted July 3, 2019 Share Posted July 3, 2019 @AnnieTimmins @media screen and (max-width:991px) { /* Contact Page */ body#collection-5cd1a15158ee3700014f8c4e .col.sqs-col-4.span-4 { float: none !important; width: auto !important; } body#collection-5cd1a15158ee3700014f8c4e .col.sqs-col-2.span-2 { display: none; } /* Footer */ /* If it doesnt work, add !important to after */ .Footer .col.sqs-col-2.span-2 { width: auto; float: none; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AnnieTimmins Posted July 3, 2019 Author Share Posted July 3, 2019 Amazing, thanks! Worked for the contact page but the code for the footer just makes it disappear (at least on Chromes developer tools, I don't have a device that size with me currently to test it on). Link to comment
tuanphan Posted July 3, 2019 Share Posted July 3, 2019 @AnnieTimmins I used Chrome Dev Tool to check CSS..I don't have iPad or Smartphone....Will check again tomorrow. In additional, you can tag me when commenting, no notification was sent to my email :( Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted July 3, 2019 Share Posted July 3, 2019 @AnnieTimmins Remove CSS I sent 1 hour ago, and use this @media screen and (max-width:991px) { /* Contact Page */ body#collection-5cd1a15158ee3700014f8c4e .col.sqs-col-4.span-4 { float: none !important; width: auto !important; } body#collection-5cd1a15158ee3700014f8c4e .col.sqs-col-2.span-2 { display: none; } /* Footer */ /* If it doesnt work, add !important to after */ .Footer .col.sqs-col-2.span-2 { width: auto; float: none; display: block !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AnnieTimmins Posted July 3, 2019 Author Share Posted July 3, 2019 @tuanphan super! That fixed it. Thanks so much :D Link to comment
priscamichaux Posted May 14, 2020 Share Posted May 14, 2020 On 7/2/2019 at 4:49 PM, tuanphan said: @media screen and (max-width:768px) { [data-nc-base="mobile-bar"] { display: block; } [data-nc-base="header"] { display: none; } } Hi, when i try this code on my website it works for the menu but all my other content disapear at 768 px, do you know why? I m working with the Brine template. Could you please help me. Thanks Link to comment
tuanphan Posted May 14, 2020 Share Posted May 14, 2020 1 hour ago, priscamichaux said: Hi, when i try this code on my website it works for the menu but all my other content disapear at 768 px, do you know why? I m working with the Brine template. Could you please help me. Thanks Can you share link to your site & what problem? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.