Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by pearler1570048501

  1. Site URL: https://bell-orb-d33c.squarespace.com/?password=pearler I've used the below code to achieve some vertical social links. I'm wondering why they're not staying fixed when I scroll, however. Any help is appreciated! Website ✿ → // ☯︎ FORCE MOBILE MENU // @media screen and (min-width:768px) { .header-nav-item, .header-actions-action .btn { display: none!important; } .icon--cart { stroke: 2px solid!important; } body:not(.header--menu-open) .white .header-actions .icon--stroke svg { stroke-width: 2px!important; } .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } } .header-display-desktop { .header-burger { position: absolute; left: 0; margin-left: 4vw!important; } } // ☯ ☯ ☯ VERTICAL SOCIAL ICONS ☯ ☯ ☯ // .header-actions-action--social { position:fixed; top:50%;//change as necessary flex-direction:column; right:1vw; } .header-actions-action--social .icon { margin-left:-40px !important; //change as necessary margin-bottom:20px ; } @media screen and (min-width:768px) { .header-actions-action--cart { position:fixed; right:30px; top:45%; } .header-actions--right { justify-content:center; }}
  2. @tuanphanThat worked perfectly, thank you.
  3. Site URL: https://sophiapower.squarespace.com/about?password=pearler I'm using a split screen layout but I can't seem to figure out why the image is appearing cropped! Any help would be awesome. Please @ me. Website →
  4. Site URL: https://intuitive-wellbeing.squarespace.com/retreats I'm wondering why on mobile this rotating text animation won't move the text to a new line? https://share.getcloudapp.com/mXurDQX2 // ✦ ROTATING TEXT ✦ // .sp-intro { width: 90%; max-width: 90%; text-align: center; margin: 0 auto; } .sp-headline { margin: 0 !important; } .sp-intro, .sp-words-wrapper { h3, b, i, p, span { font-weight: 300; } } .sp-words-wrapper { display: inline-block; position: relative; text-align: left; width: auto !important; } .sp-words-wrapper b { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0; } .sp-words-wrapper b.is-visible { position: relative; } .no-js .sp-words-wrapper b { opacity: 0; } .no-js .sp-words-wrapper b.is-visible { opacity: 1; } .is-visible { overflow: visible!important; } .sp-headline.slide span { display: inline-block; padding: 0; } .sp-headline.slide .sp-words-wrapper { overflow: hidden; vertical-align: bottom; width: auto; } .sp-headline.slide b { opacity: 0; top: .2em; } .sp-headline.slide b.is-visible { top: 0; opacity: 1; -webkit-animation: slide-in 0.6s; -moz-animation: slide-in 0.6s; animation: slide-in 0.6s; } .sp-headline.slide b.is-hidden { -webkit-animation: slide-out 0.6s; -moz-animation: slide-out 0.6s; animation: slide-out 0.6s; } @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes slide-in { 0% { opacity: 0; -moz-transform: translateY(-100%); } 60% { opacity: 1; -moz-transform: translateY(20%); } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); -o-transform: translateY(20%); transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); } } @-moz-keyframes slide-out { 0% { opacity: 1; -moz-transform: translateY(0); } 60% { opacity: 0; -moz-transform: translateY(120%); } 100% { opacity: 0; -moz-transform: translateY(100%); } } @keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); -moz-transform: translateY(120%); -ms-transform: translateY(120%); -o-transform: translateY(120%); transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } @media screen and (max-width: 768px) { .sp-intro p, .sp-words-wrapper p, .sp-intro span, .sp-words-wrapper span { font-size: 1rem!important; } .sp-words-wrapper { width: 100% !important; } }
  5. Site URL: https://adaptology.squarespace.com Is it possible to get the product category or tags to appear below the product title on any product page or block? This is what I'm hoping to achieve ( if "Energising Mushroom" is the category or tag) Thanks!
  6. @tuanphan Have you figured out how to get the cart icon to show on desktop? http://adaptology.squarespace.com/?password=pearler Thanks!
  7. Fantastic, @tuanphan that has worked beautifully. Yes I've been lazy with my tablet styling there! Gosh. Image ① Should I just make the button smaller on tablet, or force it to stack somehow? Image ② I'm not sure how to make this look better! The 3 columns don't work well on tablet do they, just desktop. Image ③ I can change the forced mobile menu for tablet, thank you Image ④ Yes it would probably be good to have the image on top Image ⑤ Should I make the container for the gallery have a max-width on tablet?
  8. @tuanphan True, thanks! However unfortunately adding this hasn't fixed the issue.
  9. Site URL: https://pearler.squarespace.com/feels I've added a Shopify Buy Button onto the page using a code block. However, it's affecting the margins on the right of the section. Any ideas why? <div id='product-component-1617764303049' class="nav-gif-wrapper"> <img src="https://media0.giphy.com/media/l0Iyl89hueXgsyGRi/giphy.gif" height="100" style="top:-75px; left: 15%;"> <script type="text/javascript"> /*<![CDATA[*/ (function () { var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js'; if (window.ShopifyBuy) { if (window.ShopifyBuy.UI) { ShopifyBuyInit(); } else { loadScript(); } } else { loadScript(); } function loadScript() { var script = document.createElement('script'); script.async = true; script.src = scriptURL; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); script.onload = ShopifyBuyInit; } function ShopifyBuyInit() { var client = ShopifyBuy.buildClient({ domain: 'pearlerwork.myshopify.com', storefrontAccessToken: 'eec0fbe1582313daf17f1305b3293c33', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: '6641103274161', node: document.getElementById('product-component-1617764303049'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: { "product": { "styles": { "product": { "@media (min-width: 601px)": { "max-width": "calc(25% - 20px)", "margin-bottom": "50px" } }, "button": { "font-weight": "bold", "color": "#822504", ":hover": { "color": "#822504", "background-color": "#e59ea3" }, "background-color": "#feafb5", ":focus": { "background-color": "#e59ea3" }, "border-radius": "0px", "padding-left": "70px", "padding-right": "70px" } }, "contents": { "img": false, "title": false, "price": false }, "text": { "button": "Add to cart" } }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-20px" } } } }, "modalProduct": { "contents": { "img": false, "imgWithCarousel": true, "button": false, "buttonWithQuantity": true }, "styles": { "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } }, "button": { "font-weight": "bold", "color": "#822504", ":hover": { "color": "#822504", "background-color": "#e59ea3" }, "background-color": "#feafb5", ":focus": { "background-color": "#e59ea3" }, "border-radius": "0px", "padding-left": "70px", "padding-right": "70px" } }, "text": { "button": "Add to cart" } }, "option": {}, "cart": { "styles": { "button": { "font-weight": "bold", "color": "#822504", ":hover": { "color": "#822504", "background-color": "#e59ea3" }, "background-color": "#feafb5", ":focus": { "background-color": "#e59ea3" }, "border-radius": "0px" } }, "text": { "total": "Subtotal", "button": "Checkout" } }, "toggle": { "styles": { "toggle": { "font-weight": "bold", "background-color": "#feafb5", ":hover": { "background-color": "#e59ea3" }, ":focus": { "background-color": "#e59ea3" } }, "count": { "color": "#822504", ":hover": { "color": "#822504" } }, "iconPath": { "fill": "#822504" } } } }, }); }); } })(); /*]]>*/ </script>
  10. @tuanphan thanks! This worked nicely on my other website, but not on this one: https://share.getcloudapp.com/z8uPZlvl On mobile, the effect of the code is that the page locks and you can't scroll at all.
  11. Hi! I find it most clear that it's off center when I open the menu - see here: https://share.getcloudapp.com/KouZBdYD
  12. @tuanphan I've tried this and it works nicely, but now my logo appears off center: https://share.getcloudapp.com/KouZBdYD https://meridian-yoga-template.squarespace.com/?password=pearler
  13. Site URL: https://meridian-yoga-template.squarespace.com/?password=pearler I'm getting horizontal overflow on my mobile site - I have the code below but it doesn't seem to be working. Am I missing something? Thank you! body { overflow-x:hidden!important; overflow-y:visible!important; }
  14. I'm creating some Squarespace templates to sell on Creative Market. I'm interested in creating more advanced ones where I utilise custom CSS more. The only road block I'm having is trying to make it so that the purchaser doesn't actually have to touch much of the code. Mostly. it's when they're applying their own branding - colours and fonts - where they need to get into the code and edit it to their own hex codes. I'm wanting to know if there's a way to make it so that we can call on the global styles within our CSS? So for example, whatever font family they've set for headings, can be called on like this in the CSS? For example, this is what I do in Shopify: font-family:var(--typeHeading)!important; Is there a Squarespace equivalent? Thanks!
  15. Site URL: https://meridian-yoga-template.squarespace.com/?password=pearler I can't seem to get this image to center on mobile. I believe it's because I've changed the size of this image to appear smaller with code section[data-section-id="5fa367f55327653df13c699b"] { img { width: 50%!important; height: 50%!important; }} Better yet, is there a way to get this image to appear smaller on mobile without using this code? https://share.getcloudapp.com/8Luk7jwJ Thanks!
  16. Site URL: https://meridian-yoga-template.squarespace.com/ I can't seem to figure out why the center image on the homepage isn't showing on mobile? https://share.getcloudapp.com/L1uNPzg1 Password for the site is "pearler" https://meridian-yoga-template.squarespace.com/ Thanks!
  17. Thanks, @bangank36. That makes sense. As this is new to me, do you have an example of how the code would look for Squarespace? I'm unsure what terminology to use. For example, this is what I would do on Shopify: font-family:var(--typeHeaderPrimary),var(--typeHeaderFallback);
  18. Site URL: https://ukulele-rabbit-z4zx.squarespace.com/ Hello! I'm creating a Squarespace template to sell. As the summary blocks aren't possible to change the title to the heading font without code, is it possible to make it so that it just makes the font family whatever the headings are currently set to? i.e. .summary-title-link { font-family: ??inherit??; } This is because whoever buys the theme will likely change the font to their own branding, and I don't want to have to get everyone to touch the code in order to change this. Thanks! Site password: pearler
  19. Site URL: https://ukulele-rabbit-z4zx.squarespace.com/ I see lots about making the hamburger icons thicker, but not the plus sign. Any ideas here? Thanks! Site password is 'pearler' Thanks!
  20. @tuanphan it's a trial for now, but it'll be business. The site has Javascript on it
  21. This doesn't seem to be working for me on 7.1 Here's my code <style type="text/css"> .summary-title { cursor: url(https://media2.giphy.com/media/U7h910z9HZAkO4f6Uh/giphy.gif), auto !important; } </style> thegingedit.squarespace.com Pass: "pearler"
  22. Site URL: https://thegingedit.squarespace.com/ Wondering why the 'read more' links appear different on blog previews compared to blog summary blocks on 7.1? On the summary block, it appears as: On the blog, it appears as I really don't mind which one stays, but I want to make them the same - so either remove the arrow and add the same underline on the summary block, OR remove the underline and add an arrow on the blog pages. Pass for the website is "pearler" Thanks!
  23. Site URL: https://www.thesehoneydays.com/ I have a simple text logo and for some reason, only on Safari, it's appearing cut off. Wondering how to fix this? Thank you.
  • Create New...