RichardR
-
Posts
131 -
Joined
-
Last visited
Reputation Activity
-
RichardR reacted to Ziggy in e-learning code stopped working on mobile
Glad that was fairly easy for you to rectify!
-
RichardR got a reaction from Ziggy in e-learning code stopped working on mobile
Thanks is much for your reply, they have sneakily changed the url where it's hosted - which they didn't communicate. Panic over and thank you for checking and pointing this out.
-
RichardR reacted to Ziggy in e-learning code stopped working on mobile
This is the message I see in place of the code, looks like a problem with the host not your website:
-
RichardR reacted to Web_Solutions in Announcement bar overlapping menu on mobile
Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.
@media only screen and (max-width: 767px) { .sqs-announcement-bar-close { width: 2em !important; height: 2em !important; } .sqs-announcement-bar-close:after { line-height: 2em !important; } .sqs-announcement-bar-text{ padding: .4em 2em !important; } .sqs-announcement-bar-text p { font-size: 14px !important; } .is-mobile-overlay-active .sqs-announcement-bar-dropzone { display: none !important; } }
-
RichardR got a reaction from tuanphan in Help with CSS for alternative search function
As always @tuanphan thank you for all your help. I've managed the styling with a little help from Elfsight too.
So pleased it finally works!
Thank you so much.
-
RichardR reacted to tuanphan in Help with CSS for alternative search function
With jump bottom then top, add this to Website > Website Tools > Custom CSS
.eaSXfB { display: none !important; } header.Header .eaSXfB { display: block !important; }
-
RichardR reacted to tuanphan in Help with CSS for alternative search function
I will check it again. In the meantime, You try posting this to Elfsight Forum, their support is great. They are ready to help with code related issues.
-
RichardR reacted to tuanphan in Help with CSS for alternative search function
Can you send Elfsight code you used? We can test it easier
-
RichardR got a reaction from tuanphan in Secondary button in header on mobile
Just awesome as always. Thanks so much for all your time and support.
-
RichardR reacted to tuanphan in Secondary button in header on mobile
Add this code under
<style> /* Hide join here orange button */ @media screen and (min-width:641px) { div#block-yui_3_17_2_1_1590057489722_4915 { display: none; } } /* hide mobile donate button */ nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary { display: none; } </style>
-
RichardR reacted to tuanphan in Secondary button in header on mobile
Add to Settings > Developer Tools > Code Injection > Footer (DO NOT add to Custom CSS)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('<div class="sqs-block-button button-block custom-button"><div class="sqs-block-button-container--center"><a href="https://google.com" target="_blank" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element">How to Join</a></div></div>').appendTo('[data-nc-container="top-center"]'); }); </script> <style> [data-nc-container="top-center"] { display: flex !important; } </style>
-
RichardR reacted to tuanphan in Secondary button in header on mobile
Use this new code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('<div class="Header-nav-inner"><a href="https://google.com" class="Header-nav-item">How to Join</a></div>').appendTo('nav.Header-nav.Header-nav--secondary'); $('<div class="Header-nav-inner"><a href="https://google.com" class="Header-nav-item">How to Join</a></div>').appendTo('.Mobile [data-nc-container="top-center"]'); }); </script> <style> nav.Header-nav.Header-nav--secondary a { white-space: nowrap; } .Mobile [data-nc-container="top-center"] { display: flex !important; } .Mobile [data-nc-container="top-center"] a { box-shadow: 0 2px 0 0 #c77400; border: 0; background-color: #f08c00; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; border-radius: 300px; padding: 12px 18px; margin: 0.618em 0.618em; } @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1590057489722_4915 { display: none; } } </style>
-
RichardR reacted to tuanphan in Secondary button in header on mobile
#1. With desktop, if you want, we can turn last nav item to a button style.
#2. With mobile, add a button here?
-
RichardR got a reaction from tuanphan in Brine banner advice
Thank you so much!!! Really looks a lot better. I'll play around a little more but it's given me everything I need
it looks good on the mobile in portrait but a little odd in landscape. Would I need any specific code to rectify that?
Also, would you advise making it full width like the banner?
Many thanks again.
-
RichardR reacted to DPruitt in Brine banner advice
If you're talking about the small space on the left and the right, update the .Main-content padding... I updated the code above to reflect... For mobile, you can do adjustments as you need... to make it work the way you want.
I updated the code to include additional mobile stacking on devices 950px and below.
-
RichardR reacted to DPruitt in Brine banner advice
/*Collection Padding*/ #collection-64a1d528df04412c40a492b8 {.Main-content {padding-top:0px !important; padding-left:0px !important; padding-right:0px !important;} /*Image Title*/ .image-title p{color: #ef8c21 !important; font-size: 60px !important; font-weight: 600 !important; font-family: impact !important;} /*Image Subtitle*/ .image-subtitle p { color: #fff !important; font-size: 18px !important; font-weight: 600 !important; font-family: quicksand !important;} /*Text Position*/ .image-block-card-content-position-top .sqs-block-image .design-layout-card .image-card-wrapper { align-items: center !important;} /*Card Background*/ .sqs-block-image .design-layout-card .image-card-wrapper {background-color:#09579f !important;} /*Card Size*/ .sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper { position: relative; width: calc(50% - 2.5%) !important;} /*Image Size*/ .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>:first-child { width: calc(50% - 2.5%) !important;} /*Image Stack*/ @media screen and (max-width: 950px) { .sqs-block-image .design-layout-card{ width:100%; display:block !important; } .sqs-block-image .design-layout-card .image-card {padding-top:0px;} .design-layout-overlap .image-title {margin-left: 12.5%;} .sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper,.sqs-block-image .design-layout-overlap:not(.sqs-narrow-width) .image-card-wrapper { width: calc(100%);} .sqs-block-image .design-layout-card:not(.sqs-narrow-width) > :first-child,.sqs-block-image .design-layout-overlap:not(.sqs-narrow-width) > :first-child { width: calc(100%);} } }
This should get you pretty close... One thing you need to do is crop your image before you upload it... maybe a 3:2 ratio or 4:3..
-
RichardR reacted to tuanphan in Brine banner advice
For this page? https://www.probation-institute.org/donate-copy
or this? https://www.probation-institute.org/donate
-
RichardR reacted to DPruitt in Brine banner advice
Hey Richard!
You might use a "Card" design within an Image Block for this instead of using a background image...
You'll probably need some width adjustments to that specific page of the index to make it go full screen...
-
RichardR got a reaction from paul2009 in Error parsing Custom CSS, verify Custom CSS is valid
How did I miss that!! Will report back shortly.
-
RichardR got a reaction from paul2009 in Error parsing Custom CSS, verify Custom CSS is valid
SUCCESS!!! Thanks so much Paul, I really appreciate your help and everyone's comments.
-
RichardR reacted to paul2009 in Error parsing Custom CSS, verify Custom CSS is valid
Look for a capital "I" - it should be lowercase.
-
RichardR reacted to paul2009 in Error parsing Custom CSS, verify Custom CSS is valid
What is the site URL?
-
RichardR got a reaction from ilseS in Error parsing Custom CSS, verify Custom CSS is valid
Thanks so much for this walkthrough Paul, I really appreciate it. I've followed it and removed all CSS from the Custom CSS part and also the small amount of code injection. Then refreshed and checked, same error with all CSS removed. I've tried to get this across to SS but they don't seem to respond to my comment about removing it all and it still showing the error. I'll keep trying of course 🙂
-
RichardR reacted to paul2009 in Error parsing Custom CSS, verify Custom CSS is valid
Why is this error appearing in my editor?
This week, Squarespace introduced a new editor 'feature' with the intention of highlighting custom CSS errors when users are editing other content. If errors are detected with Custom CSS, a red banner appears in the editor to warn users about the issue.
Squarespace have done this to try to reduce the number of problems being caused by custom code that users randomly add to their sites without knowing the harm that it can cause.
Recently many more customers reported problems with the editing interface, for example Fluid Engine, but these errors were often self-inflicted - caused by users adding snippets of Custom CSS that interfere with Squarespace. As customers rarely return to the Custom CSS panel after they've added some "magic code", this new error banner should help to highlight the issue and allow them to fix it for themselves.
However, I have seen a number of reports of the banner appearing even when the Custom CSS panel is empty, so there may be some instances of "false flags" where it appears for no good reason.
How to fix the error
If the error has appeared on your site, my advice is to remove all custom CSS and then check if the error appears. You can do this as follows:
1. Go to Design > Custom CSS
2. Save a copy of your CSS somewhere safe. A text file is ideal for this. Do not save it in Microsoft Word as this will often cause unwanted changes to the CSS.
3. When you are sure that you have a good backup of the CSS, delete all content in the Custom CSS panel.
4. Save the changes and check to ensure the panel is now empty. When empty, you should only see the label for line 1; nothing else:
5. If you have added any custom CSS to any other areas of your website using Code Injection, repeat this process for all remaining code. You may find this in Settings > Advanced > Code Injection and in the Settings panel of individual pages.
6. When you have removed all CSS, refresh your browser to reload the site (Cmd-R on Mac; Ctrl + Shift +R or Ctrl + F5 on Windows).
7. Return to the page you were editing and check for the error message...
If the error message has gone, your CSS was the likely cause of the error. You will need to check the CSS that you backed up to find the cause of the issue. Understandably, Squarespace Customer Care cannot help you to troubleshoot your own CSS. If you had more than a few lines of Custom CSS, it may help you to pinpoint the cause of the error if you carefully re-insert short sections of your CSS until the error reappears. If the error message is still shown after you have removed all Custom CSS from your site then you know that your Custom CSS is not the cause of the error message. You can now confidently go back to Squarespace Customer Care to tell them that your site shows a CSS error message and that you do not have any custom code on the site. They can then assist you to resolve or escalate the issue. I highly recommend using the live text chat service (which operates at certain times of the day) to do this because it removes the delay between responses and allows you to check that you have been misunderstood. Once Customer Care realise that you do not have any custom code, you should find it easier to get support. Let me know if you have any questions.
Did this help? Please give feedback by clicking an icon below ⬇️
-
RichardR got a reaction from paul2009 in Error parsing Custom CSS, verify Custom CSS is valid
Thanks so much for this walkthrough Paul, I really appreciate it. I've followed it and removed all CSS from the Custom CSS part and also the small amount of code injection. Then refreshed and checked, same error with all CSS removed. I've tried to get this across to SS but they don't seem to respond to my comment about removing it all and it still showing the error. I'll keep trying of course 🙂