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

bangank36

Circle Member
  • Posts

    4,545
  • Joined

  • Last visited

  • Days Won

    53

Community Answers

  1. bangank36's post in How can I change the Font Color in a Specific Block? was marked as the answer   
    You need to find the block id , like so, using this extension
    Squarespace ID Finder - Chrome Web Store (google.com)
    #block-bc173184b02f630b124b a { color: #6abd45 }
  2. bangank36's post in Is it possible to Hide an Entire Section from my Homepage and Unhide for later use? was marked as the answer   
    body:not(.sqs-edit-mode) section[data-section-id="5f8fea6196d2c93c2a238f81"] { display: none !important; visibility: hidden !important; opacity: 0 !important; } body.sqs-edit-mode section[data-section-id="5f8fea6196d2c93c2a238f81"] {opacity: 0.5 !important;}  
  3. bangank36's post in Can I make a Scrolling Marquee effect on one of my sections? was marked as the answer   
    Try this
    section[data-section-id="5f8fea6196d2c93c2a238f89"] .content-wrapper { position: relative; overflow: hidden; --offset: 20vw; --move-initial: calc(100%); --move-final: calc(-10%); } section[data-section-id="5f8fea6196d2c93c2a238f89"] .content { width: fit-content; display: flex; position: relative; transform: translate3d(var(--move-initial), 0, 0); animation: marquee 20s linear infinite; animation-play-state: running; } section[data-section-id="5f8fea6196d2c93c2a238f89"] .sqs-block-html { margin: 0 !important; padding: 0 !important; } @keyframes marquee { 0% { transform: translate3d(var(--move-initial), 0, 0); } 100% { transform: translate3d(var(--move-final), 0, 0); } } play this value to change speed

  4. bangank36's post in Show a page in navigation only on mobile (from folder) was marked as the answer   
    For example of your folder nav item url is /services
    .header-nav-folder-content a[href*="services"] { display: none; }  
  5. bangank36's post in Custom Font CSS Code for Tricky Buttons was marked as the answer   
    Title: .summary-title-link
    Read more: .summary-read-more-link

  6. bangank36's post in Horizontal Align Text Block in Mobile View. was marked as the answer   
    I'm not sure why your blog page has different navigation blog post, so here a work around with the help of some custom code
    1. Settings->Design->Custom Css
    @media only screen and (max-width: 768px) { .col.blog-navigation { width: 50% !important; float: left !important; } } 2. Settings->Advanced->Code Injection
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function() { $("a:contains('← Previous')").closest(".col").addClass("blog-navigation"); $("a:contains('Next →')").closest(".col").addClass("blog-navigation"); }); </script> 3. Outcome

  7. bangank36's post in Freezing Words was marked as the answer   
    Try this custom css
    #collection-5f0f716c82c64b2acb084429 .sqs-block-collectionlink .collectionlink-title a,#collection-5f0f716c82c64b2acb084429 .link-block .collectionlink-title a { width: 100px; display: inline-block; }  
  8. bangank36's post in Custom Button Presentation in Code Block was marked as the answer   
    <div style="display: inline-block;" class="sqs-block button-block sqs-block-button"><div class="sqs-block-content"> <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium"> <a href="" class="sqs-block-button-element--medium sqs-block-button-element" data-initialized="true">Learn more</a> </div> </div></div>
  9. bangank36's post in How can i fix my section vertical middle in any width was marked as the answer   
    Add this to custom css
    section[data-section-id="5fd75f03d654060362e643a1"] { height: 100vh; }
  10. bangank36's post in Make slideshow gallery images round was marked as the answer   
    This will turn all gallery image to round
    .gallery-slideshow-item img { border-radius: 50px; } This is section specific
    section[data-section-id="5fdaf7c4de510a316ebe1b5c"] .gallery-slideshow-item img { border-radius: 50px; } This is page specific
    #collection-5fd9ee29aa42ed0359c9a7fb .gallery-slideshow-item img { border-radius: 50px; }
  11. bangank36's post in Targeting a Specific Summary Block was marked as the answer   
    I used Chrome extension Find Squarespace id: Squarespace ID Finder - Chrome Web Store (google.com)
    1. Click on its icon to see the id of click
    2. click to the section id and replace it with this code, I made it ready for you
    #block-yui_3_17_2_1_1608078690925_28437 .summary-thumbnail { border: 2px solid #A43D5F; border-radius: 50%; }  

  12. bangank36's post in Trying to add hyperlink to text in a code block! was marked as the answer   
    You should place the link tag outside the span
    <a target="Donate" href="#support-us"> <span class="highlight"> Donate </span> </a>  
  13. bangank36's post in Logo Sizing on Mobile Landscape Orientation was marked as the answer   
    The template set the logo size ~200px on 640px breakpoint, we can fix it by
    @media only screen and (min-width: 641px) { #header #logoWrapper, #header #logoImage { width: 185px; } } @media only screen and (min-width: 1192px) { #header #logoWrapper, #header #logoImage { width: 285px; } }
  14. bangank36's post in Logo in footer is too large on mobile was marked as the answer   
    Kindly add this into Desing->Custom Code
    @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1606135158030_44209 .sqs-block-image-figure { width: 120px; } }
  15. bangank36's post in How to connect Portfolio to Homepage in 7.1? was marked as the answer   
    You can customize the gallery caption to achieve same effect, btw your site is password protected
    https://beyondspace7-1.squarespace.com/?password=1234
  16. bangank36's post in Image icons as bullet points was marked as the answer   
    Since the styling is block-specific, you got to know the id of each block
    1. Install Chrome extension Chrome Web Store - Extensions (google.com)
    2. Click on extension icon to get the block id and replace it into this snippet (replace the text: _block_id with id)
    _block_id ul li>*:first-child::before { content: '' !important; } _block_id ul li { position: relative; list-style-type:none; } _block_id ul li:before { content: ""; background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png); background-repeat: no-repeat; background-size: cover; position: absolute; width: 40px; height: 20px; left: -40px; top: 2px; } 3. On the specific case
    #block-yui_3_17_2_1_1607577106512_8287 ul li>*:first-child::before { content: '' !important; } #block-yui_3_17_2_1_1607577106512_8287 ul li { position: relative; list-style-type:none; } #block-yui_3_17_2_1_1607577106512_8287 ul li:before { content: ""; background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png); background-repeat: no-repeat; background-size: cover; position: absolute; width: 40px; height: 20px; left: -40px; top: 2px; }  

  17. bangank36's post in Resize section background image on scroll was marked as the answer   
    .shrink + #page section[data-section-id="5f75a22fcd2d631e090303ff"] .section-background img { height: 50% !important; top: 50%; position: relative; } .shrink + #page section[data-section-id="5f75a22fcd2d631e090303ff"] { min-height: 50vh !important; } #page section[data-section-id="5f75a22fcd2d631e090303ff"] .section-background img { transition: all 0.5s; }  
  18. bangank36's post in Custom Font CSS Code for Tricky Buttons was marked as the answer   
    Please try this custom css, where is newsletter 
    input::placeholder, .sqs-system-button, .sqs-block-form .field-list .title, .header-actions-action--cta a, .header-skip-link { font-family: 'Litos' !important; }  
  19. bangank36's post in How can I change the Audio Player icon? was marked as the answer   
    Kindly use this
    #block-yui_3_17_2_1_1607387638375_7768 .play-button { background-image: url(https://i.ibb.co/RcgYydw/500px-Speaker-Icon.png) !important; background-size: cover; border: none !important; width: 40px; height: 40px; } #block-yui_3_17_2_1_1607387638375_7768 .playing .pause { background-image: url(https://i.ibb.co/4fLVJpz/500px-Speaker-Icon-mute.png) !important; background-size: cover; border: none !important; width: 40px; height: 40px; }  

  20. bangank36's post in Button won't fire code was marked as the answer   
    Correct snippet should be
    <br> Square feet of driveway: <input type="text" id="drivewayarea"/><br><br> Thickness of driveway (in inches): <input type="text" id="drivewaythickness"/><br><br> <input type="button" value="Calc" onclick="formdata()"/><br><br> Estimated cubic yards: <input type="text" id="cubicyards"/><br> <script> function formdata() { var thickness = parseFloat(document.getElementById("drivewaythickness").value) || 0; var area = parseFloat(document.getElementById("drivewayarea").value || 0); document.getElementById("cubicyards").value = ((area * thickness) / (36 ^ 3)).toString(); } </script>
  21. bangank36's post in Blank space on the right side of my website shows up on larger desktops? was marked as the answer   
    it was the max width set up, try this custom css
    #canvasWrapper { max-wdith: initial; }
  22. bangank36's post in Moving the social icons in header was marked as the answer   
    it's better on left bottom
    .header-display-desktop { flex-flow: wrap; } .header-layout-branding-center-nav-center .header-actions--left { flex-flow: wrap; width: 100%; order: 1; max-width: initial; flex: auto; }
  23. bangank36's post in How to remove the gap between the top of the page and the sticky header on Brine/Foster? was marked as the answer   
    update this header style
    .Header { position: fixed !important; z-index: 1000; width: 100%; top: 0; }
  24. bangank36's post in Change order of blocks on mobile was marked as the answer   
    Can use css grid for this, you should paste this snippet to Settings->Design->Custom Css
    @media screen and (max-width: 767px) { section[data-section-id="5f93c908d3bfb9134fc24693"] .sqs-row { display: grid; } section[data-section-id="5f93c908d3bfb9134fc24693"] .sqs-row .span-4:nth-child(1) { order: 2 } section[data-section-id="5f93c908d3bfb9134fc24693"] .sqs-row .span-4:nth-child(2) { order: 1 } section[data-section-id="5f93c908d3bfb9134fc24693"] .sqs-row .span-4:nth-child(3) { order: 0; } }
  25. bangank36's post in Background colour - Block section was marked as the answer   
    You may want to use different images with transparent color, please copy this custom css
    #block-yui_3_17_2_1_1605973710411_27115 + .sqs-row { background: #d48994; } #block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4 { padding: 5%; padding-bottom: 2%; box-sizing: border-box; } #block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4 .sqs-block-image .image-card-wrapper { padding-bottom: 50px !important; } #block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4 .sqs-block-button { position: relative; top: -50px; } #block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4:first-child { padding-right: 0; padding-left: 10%; } #block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4:last-child { padding-left: 0; padding-right: 10%; }
×
×
  • Create New...