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

pearler1570048501

Circle Member
  • Posts

    53
  • Joined

  • Last visited

Posts 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. 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;
    }
    
    }

    spacer.png

  3. 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?

  4. 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>

     

    Screen Shot 2021-04-07 at 5.15.44 pm.png

  5. 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!

  6. 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!

  7. 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

  8. 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:

    Quote

    Read More →

    On the blog, it appears as

    Quote

    Read More

    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!

    Screen Shot 2020-10-02 at 5.08.08 pm.png

    Screen Shot 2020-10-02 at 5.08.14 pm.png

×
×
  • Create New...