Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by jojod

  1. Hi! I'm not sure if my message reply to you fell through the cracks on this thread: 

     Thank you for the help.

  2. Hi! Could you please help me with the same request but for my client's site? It is 4 columns that I would like to stack on tablet, but just the section with "Community, Trust, Family, Creativity".... https://www.homemadeeventsroc.com/about pw: demo
  3. You are the best. That fixed it. Thank you so much! I'll mark your original help as the solution although you solved two of my issues.
  4. Yay! While this code fixed my border on mobile issue, now when you tap+scroll (so not tapping to open product page, but more like a hover tap & scroll), the square edges of the hover image appear. How can I get rid of that? Or would it be easier to just turn off the hover on mobile (if so, how would I do that?)? Edit: I'd like to add that this happens on iPhone iOS (I have a 14 Pro Max) - it doesn't seem to happen on the mobile via inside of Squarespace. This is what it looks like when tap+scroll (it flickers to this):
  5. Oh I'm sorry - the form to fill out to post this in the forum asked for the URL and I thought it would share it on my actual post. The URL is: https://www.thecreativeinka.com/shop
  6. So sorry! I am jus barely seeing your reply as I was never notified of your response. Thank you so much! That was my only issue - improperly inputting the js code injection.
  7. Hi there! hopefully @tuanphan sees this because this person is a genius. Okay so my new Shop page only has three products, and to match the rest of my website, I customized the images to have 35px border-radius and 2px border - but for some reason this is not translating to the mobile site. I've tried adding the mobile code to the custom css but I'm not quite getting it. Below is the code I currently have going: ////Shop Customizations//// .products.collection-content-wrapper .grid-item .grid-image{ border: 2px solid #000; border-radius: 35px; box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.1) } .products.collection-content-wrapper .grid-item:hover .grid-image{ border-color: #ca5741! important; box-shadow: none!important; } .products.collection-content-wrapper .grid-main-meta .grid-title, h1.ProductItem-details-title { font-family: 'Otomanopee' !important; } /* 2 Column Product Grid */ @media only screen and (max-width:640px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 48%; } } .products .grid-image { width: 85% !important; margin: 0 auto; }
  8. Site URL: https://www.thecreativeinka.com/about Hi all - I've been trying to get this Rotating Words script to work on my About page for far too long. While it works just fine in the codepen.io website, it does not seem to want to animate when live on my Squarespace 7.1 FE page on my website. When the section is scrolled to/loaded, it seems to just jump once, but never rotates to the other words. What i've done/tried: Code block (this is where I placed the HTML code) Custom CSS (where I placed the CSS coding, coded under the block ID#) Javascript code: I've tried placing this in the page's code injection header within <style> tags, and have also tried to place it in Advanced > Code Injection, in the header - but neither option seems to want to make this animate as it should. I think my issue is where/how to place the javascript code as I do think I've placed the HTML and custom CSS in the correct places. This is the animation I am trying to insert: https://codepen.io/kenwestphal/pen/xqRZYZ Any help is appreciated.
  9. I've been trying to get this one to work on my 7.1 FE site and it won't.... https://codepen.io/kenwestphal/pen/xqRZYZ
  10. @tuanphan Have you been able to get that code to work? (Re: https://codepen.io/Rathijit/pen/EbQqPd) I've tried and it doesn't animate - it only bounces once and then nothing....
  11. YOU ARE A LIFESAVER!!! How insane that one tiny detail can throw off so many things. Thank you, that fixed the whole issue.
  12. Here is the Code Block code (it is the same on both pages that have it - looks correct in one page, but not the one in question): <div class="sqs-block-button-container--center" id="my-cta-button-container"> <a href="/contact" class="sqs-block-button-element--large sqs-block-button-element" id="my-cta-button">WORK WITH US </div> Then here is the Custom CSS for the button, it applies to both pages that have this button, but looks wrong in the page in question, and correct in the other: //Custom CTA button// #my-cta-button-container { text-align: center !important; } #my-cta-button { text-align: center !important; background-color: #D1E4D1; border-radius: 300px; position: relative; -webkit-transition: .1s background-color linear; -moz-transition: .1s background-color linear; -o-transition: .1s background-color linear; transition: .1s background-color linear; padding: 18px 30px; color: #394D3A; border-color: #d34b27; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: 550; font-style: normal; width: 100px; } #my-cta-button:hover { background-color: #BFC08B; border-radius: 300px; position: relative; -webkit-transition: .1s background-color linear; -moz-transition: .1s background-color linear; -o-transition: .1s background-color linear; transition: .1s background-color linear; color: ##394D3A; }
  13. Thanks, @creedon. I changed it to #my-cta-button, as you suggested, and unfortunately, it did not fix the issue of random "button" appearances throughout the index page section and it also did not fix the issue of the main header index section parallax background repeating across all index page sections... Issue #1: Issue #2 (background image for 1st section, static and repeats across all sections for this index) For reference, this is what this index page is SUPPOSED to look like: https://thecreativeinka.com/website-design-2 - I just have no clue where the coding went wrong - they both should have fairly identical code, just copywriting differences. Edit: I previously stated that the cta button code included a code injection in footer - it doesn't, I mixed up my codes. CTA button code is only code block + custom css. Again, it is only my assumption that that is the problem, but I could be wrong.
  14. Site URL: https://thecreativeinka.com/branding-2 After hours of searching for an answer, I haven't found it. Hope you all can help! I've been using plenty of Custom CSS code snippets on my site revamp on my Brine template 7.0, and on this one specific page, I have no clue where I possibly broke the code. I have a feeling it's in the #cta-button custom code, but I have no clue what part of it - it LOOKS right to me. The first attached image is where the problem lies I think. This whole index-page is supposed to be dark green background with light mint green text, and mint button centered. Second image is another test page showing how this section is supposed to look. The URL for the broken index-page is below and. the background is also not supposed to be fixed in the back of ALL sections - it's supposed to only be the parallax banner image for the top index-page section. https://thecreativeinka.com/branding-2 What the above URL is supposed to resemble: https://thecreativeinka.com/website-design-2 Bit more info on the #CTA-Button code. - it contains a code block with <div> code to create the button, styling in Custom CSS, and a javascript code in footer injection. Again, it's my assumption this is where the problem lies, but I'm not sure. Halp. Thanks!!
  • 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.