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

ievavi

Member
  • Posts

    63
  • Joined

  • Last visited

Everything posted by ievavi

  1. Did you find the answer? Also, looking for some help how to change to Monday! 🙂
  2. This is how it looks on iphone 11, Safari (& wish it to be centered)
  3. That's s much appreciated! Thanks a lot for the code. Any chance you would know how I can put all images in the middle ? Now all the content is for some reason pushed to the left...
  4. I was wondering how I could put them into a grid for smaller screens? Tablets and devices. The reference is taken from this page: https://www.nataliewalkerphoto.com/about
  5. It's called, SNIPPETS FROM MY LIFE Section: section[data-section-id="60ff30b2bbf0a573aa1873d5"] Block: #block-yui_3_17_2_1_1627379114686_22447
  6. Sure - it's in about page. https://guitar-whale-z827.squarespace.com/about Pass: TrialWebsite
  7. Hello, @bangank36. I would be referring to this text (see the attached picture):
  8. Site URL: https://ievaviphoto.com/ Hello, there! Does anybody know how could this cool text scroll effect be achieved on Squarespace? I believe it's called locomotive text scroll? Website for reference: https://www.undesigned.studio/
  9. That's amazing stuff! Thanks so much! Any chance do you know how to appropriate this for mobile screens? (that it would fo horizontal rather than vertical?)
  10. Hey, @tuanphan! I used the code from https://codepen.io/skkhan/pen/MWWdXbb So the code below is: <!-- Source: https://codepen.io/skkhan/pen/MWWdXbb --> <!-- Tweak by @tuanphan --> <ul class="main-box"> <li class="box active"><span>Slide One</span> <div class="detail active"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </p> </div> </li> <li class="box"><span>Slide Two</span> <div class="detail"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </p> </div> </li> <li class="box"><span>Slide Three</span> <div class="detail"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </p> </div> </li> <li class="box"><span>Slide Four</span> <div class="detail"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </p> </div> </li> <li class="box"><span>Slide Five</span> <div class="detail"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </p> </div> </li> </ul> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap'); body .main-box { display: flex; background: #000; margin: 70px auto 70px auto; padding:0; width: 991px; } .box { height: 322px; padding:15px; border-right: 1px solid white; webkit-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; position: relative; overflow: hidden; list-style: none; } .detail { width: 85%; height: 100%; position: absolute; right: 0; top:0; background: white; color:black; opacity: 0; padding:30px; box-sizing:border-box; webkit-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; -webkit-transform: translateY(100%); transform: translateY(100%); } .box.active { width: 70% !important; } .box.active .detail { opacity: 1; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; transform: none; } .box span { writing-mode: vertical-rl; font-size: 20px; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; text-transform: uppercase; letter-spacing: 4px; width: 40px; transform: rotate(180deg); font-weight: 400; cursor: pointer; position: absolute; left: 0; right: 0; margin: 0 auto; } .box.active span { left:25px; right:auto; margin:0; font-weight:600 } .box p { line-height: 23px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var getslide = $('.main-box li').length - 1; var slidecal = 30/getslide+'%'; $('.box').css({"width": slidecal}); $('.box').click(function(){ $('.box').removeClass('active'); $(this).addClass('active'); }); </script>
  11. Site URL: https://ievaviphoto.com/ Hello, people! Would anyone give me a hand implementing this code onto my site? Would love to know the logic behind this! Thanks loads!! https://codepen.io/arjancodes/pen/gbweYB My site www.ievaviphoto.com
  12. @tuanphan, would you help me to implement this code from codepen too? https://codepen.io/arjancodes/pen/gbweYB Mysite: www.ievaviphoto.com
  13. Any insights how this could be appropriated for mobile view (that would go horizontal instead of vertical?)
  14. Site URL: https://ievaviphoto.com/ I would love testimonials in the following pages to have an autoplay feature, however the code below doesn't work. Any insights why? I use summary blocks - carousel. These are the pages I'm trying to add the code: https://ievaviphoto.com/wedding-photography-copenhagen https://ievaviphoto.com/lifestyle-photography-in-copenhagen <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { try { var container = Y.one("div#page-section-5f3e088ea1068224988e22e0"); /*change this to the slug of your page*/ var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container); gallery.setAttrs({ "autoplay":true, "autoplayOptions": { "timeout":3000, /*make this higher to decrease speed, lower to increase it*/ "randomize": true } }); } catch (e) { console.error("Could not configure Gallery autoplay.", e); } }); </script>
  15. Amazing! Will be looking forward to hearing your updates!!
  16. Brilliant! Will check those resources, @tuanphan @RyanDejaegher
  17. Couldn't really answer this question - this is what the client wanted
  18. Good point! Actually, yes :) Would you provide some help for this?
  19. Site URL: https://rocksforlife.com/ Hello, I'm looking for a solution how the shopping cart can automatically be emptied upon users leaving the site or closing their browsers. Any suggestions how this could be achieved? Thank you!
  20. Were you able to find a solution, @DevonHarris?
  21. Oh brilliant! It was a bug from my end 🙂
  22. Site URL: https://rocksforlife.com/ I would love the search bar to have rounded corners and the input text have a different font. How could I target the area? For some reason the following doesn't work: .sqs-search-page-input { border: 2px black yellow !important; border-radius: 14px !important; padding: 15px 15px 15px 45px; } Also, the search bar is only placed for mobile. Thank you loads! The site is: www.rocksforlife.com
  23. Following your post as well! Otherwise, you can try the paid solution: https://www.sqspthemes.com/plugins/related-posts-plugin 🙂
×
×
  • Create New...