Jump to content

XianNewman

Circle Member
 View Profile  See their activity

  • Posts

    118

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Posts posted by XianNewman

    Move button in mobile menu

    in Customize with code

    Posted

    On 2/4/2024 at 6:05 PM, tuanphan said:

    Use this CSS code 

    body.header--menu-open div.header-menu-cta {
	opacity: 0 !important;
	display: none !important;
	visibility: hidden !important;
	z-index: -100 !important;
}

     

    This hides the CTA button from the mobile menu, which I definitely don't want to do.

    I want to hide the Google Reviews widget from the mobile menu... which this code snippet used to do, but doesn't anymore: 

    @media (max-width: 1024px){
#eapps-google-reviews-6c531fd1-9bd5-4ab4-88d6-e677c4eb6f67 { z-index: 9 !important;}
}

     

    Move button in mobile menu

    in Customize with code

    Posted

    6 hours ago, tuanphan said:

    Add this code to Custom CSS box 

    div.header-menu-cta {
    position: relative;
    top: -200px;
}

    image.png.4561553f693dbdd802010c3cf6bfe640.png

    Thanks @tuanphan... I see you offered a different fix (moving the button). Good to know there's another option! Is the z-index fix (hiding the widget) no longer available on Squarespace?

    Move button in mobile menu

    in Customize with code

    Posted

    On 5/17/2021 at 1:03 PM, Agha_Waqas said:

    add below code into css editor

    @media (max-width: 1024px){
    #eapps-google-reviews-6c531fd1-9bd5-4ab4-88d6-e677c4eb6f67 { z-index: 9 !important;}
    }

    Hi!

    This fix is no longer working on my site.

    Any idea how I can get it working again?

    Can't reauthenticate Instagram connected account

    in Blocks

    Posted

    I'm getting this error. 

    {"error_type": "OAuthException", "code": 400, "error_message": "Your account is connected to Facebook account, and your Facebook account's future off-Facebook activity is currently turned off."}

    The steps others have taken in this thread didn't seem to help.

    On 9/27/2021 at 9:44 AM, Daveesh said:

    I found the solution for this issue. Well, it worked for me. Since Facebook is the gatekeeper for Instagram, so the the parent account for your Instagram account adnd:

    Tap in the top right of Facebook.
    1. Tap Settings.
    2. Scroll down to the Your Facebook Information section and tap Off-Facebook Activity.
    3. Tap More Options, then tap Manage Future Activity.
    4. Tap Manage Future Activity.
    5. Tap next to Future Off-Facebook Activity, then tap Turn Off to turn off your future off-Facebook activity.

    This didn't help either. Worth noting that the error message states that 'future off-facebook activity' (whatever that means) is OFF... Perhaps the instructions above are incorrect and they should be ON?

    Multiple Blogs, different formatting?

    in Customize with code

    Posted · Edited by XianNewman

    On 5/17/2021 at 8:34 PM, bangank36 said:

    image.thumb.png.7413149511fc56cfe22553b92d21513b.png 

    #collection-604d0cb8b40cb82b3bfd4c97 .blog-basic-grid .image-wrapper {
    padding-bottom: 66.66%;
}

    ratio is 2/3 ~ 66.66%, so far global settings is 100%, mean 1:1

    Hi @bangank36 I applied this fix to risedigitalinc.squarespace.com/blog and it worked perfectly... however I've just uploaded my first portrait-style and I'm wondering if there's a way to set a maximum height of the blog item images so they don't appear so big on the blog page. Do you know?

    Full-bleed image blocks w/ margin

    in Customize with code

    Posted · Edited by XianNewman

    5 hours ago, tuanphan said:

    Q1. Can you expplain clearly? include screenshot?

    Q2. You solved this?

    Q3. You can combine some code

    eg. If you want to target 6 image blocks on this section:  Shuswap Communities you can try this code 

    [data-section-id="60e9d42db6736875596e18bb"] .image-block {
padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}

    Do similar for other code

     

    Thank you, @tuanphan.

    I tried this approach before, and it didn't work.

    Here's the problems:

    1. Theres no/minimal padding between the sections. My friend wants normal section padding (he only wants to alter the padding between the image blocks).

    2. The spacing around between the image blocks should be 5px.

    3. In mobile view, there's a problem with the right margin.

    Image uploads aren't working right now, so I recording a short video to explain, instead:

    https://www.loom.com/share/393e04760d4c45ab9decb3ab62f91a24

    Screen Shot 2021-07-11 at 07.54.31.png

    Screen Shot 2021-07-11 at 07.55.00.png

     

    Full-bleed image blocks w/ margin

    in Customize with code

    Posted

    Site URL: https://desormeaux.squarespace.com

    Hey everyone.

    Helping a friend get his real estate website off the ground.

    I've used custom CSS to get the home page layout he's after: near full-bleed images (with uniform 5px spacing on all sides).

    desormeaux.squarespace.com/home (password: realtor)

    Problems:

    • The code I've applied has adjusted the vertical padding of each section - I only want to impact the spacing around the image blocks.
    • On mobile, the page can be panned left/right (as if there's content off the right edge of the page - something with the margins is off)
    • The code I've applied has a lot of fat I think could be trimmed to make the page load more efficiently.

    Anyone know how to do this right? 😂 

    Here's the code I've applied: 

    <style>
  /*buy sell section*/
section[data-section-id="60e9c627b630645a0efcd2d9"]
{
  margin: 20px;
}
section[data-section-id="60e9c627b630645a0efcd2d9"] .content-wrapper {
  margin: 5px;
    width: 100%;
    max-width: 100%;
  padding: 5px !important;
}
  #block-yui_3_17_2_1_1625934021518_9588.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}
    #block-yui_3_17_2_1_1625934021518_10525.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}
  /*communities section*/
  section[data-section-id="60e9d42db6736875596e18bb"]
{
  margin: 20px;
}
  section[data-section-id="60e9d42db6736875596e18bb"] .content-wrapper {
  margin: 5px;
    width: 100%;
    max-width: 100%;
  padding: 5px !important;
}
  #block-yui_3_17_2_1_1625937885947_14138.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}

    #block-yui_3_17_2_1_1625938476515_5348.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}

      #block-yui_3_17_2_1_1625938476515_7440.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}
  
      #block-yui_3_17_2_1_1625938476515_9589.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}
  
      #block-yui_3_17_2_1_1625938476515_11205.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}
  
      #block-yui_3_17_2_1_1625938476515_12618.sqs-block.image-block {
    padding: 5px ! important;
  margin-top: 0% !important;
  margin-left: 0% !important;
  margin-right: 0% !important;
}
  

  </style>

     

    How do you like to use promotional pop-ups on your website?

    in SEO

    Posted

    @Jo_SQSP I'm trying to use a promotional pop-up for 'housekeeping' purposes and want the button to simply close the pop-up after the visitor has accepted terms/verified age/etc.

    I've tried entering # as the address the button links to, and leaving it blank. Upon clicking the button, it opens the current page in a new tab.

    Since you made this suggestion, can you please share with us how to make it work as you described?

    Thanks!

    How to take off newsletter message: This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply

    in Customize with code

    Posted

    On 6/9/2021 at 8:13 AM, kerstinmartin said:

    This is unbelievable.  A message like this belongs in a privacy or cookie policy, a website builder should never FORCE us to display it like this on our websites. It completely disregards design asthetics and our autonomy as business owners.

    Do other email providers do this as well?

    Noticed this on a client site this morning.

    Totally agree with @kerstinmartin - it's bonkers!

    Thanks @paul2009 for the recipes 😂 

    How Can I Show Both Site Title and Logo in Header?

    in Customize with code

    Posted

    Here's the code I wound up using, that did the trick: 

    // header title
.header-title-logo a:after {
    content: "JOHN ALDAG";
    display: inline-block;
    font-size: 24px;
    font-family: Lato;
    color: white;
    text-align: center;
    vertical-align:middle;
    font-weight:900;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}

    @tuanphan My only question is, how would I make it a different font colour on blog item pages only?

    Embed form from another site on Squarespace

    in Customize with code

    Posted

    29 minutes ago, Wolfsilon said:

    Hello,

    To lift this from the website you provided, we can copy the "src" for the iframe and use it to generate your own widget. I used a online tool called "iframe generator".  Just place an embed block and insert the code. Then you can position it accordingly. 

    
<iframe src="https://candidatecentral.liberal.ca/hero-voter-id/?riding_id=59007" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>

    Hope this helps,

    -Dan

    That's amazing! I've never used a tool like that before.

    Now that I've embedded it, can I customize the styling for my site only (i.e. change the colour of the text fields, field, text, button, button text? 

    Move button in mobile menu

    in Customize with code

    Posted

    14 hours ago, tuanphan said:

    Add to Design > Custom CSS. If it works, let me know. We will check other questions 

    
/* Tablet */
@media screen and (max-width:1024px) and (min-width:768px) {
/* q1. homepage banner */
[data-section-id="6098017816396460ff8f7ea5"] .content {
    width: 70% !important;
}
/* q3. about 2 columns */
div#block-b1455df1fb8a28d4d014+.row>.span-3:nth-child(-n+2) {
    width: 50%;
}
div#block-b1455df1fb8a28d4d014+.row>.span-6 {
    width: 100%;
}
/* q4. about banner text */
[data-section-id="5f926682a85f076f863e2ae8"] .content {
    width: 70% !important;
}
/* q5. Google workspace */
[data-section-id="609998f1f93ae5050fa14a32"] .content {
    width: 90% !important;
}
}

     

    Ahhhh.... I see what you're doing here.

    Just installed the code and am testing it out. So far, so good!

    Do you think I should I adjust all the banner text to the same width for consistency?

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources