Jump to content

Agha_Waqas

Member
  • Posts

    133
  • Joined

  • Last visited

  • Days Won

    1

Reputation Activity

  1. Like
    Agha_Waqas got a reaction from Beyondspace in Turn images in summary block into clickthrough links   
    Ahhhh I see!!! actually there is custom code in css which is blocking it
    below is the code which blocked the image clickthrough, Remove below code then it will works

     
    .summary-thumbnail-outer-container a { pointer-events: none !important;  cursor: default !important; }
  2. Like
    Agha_Waqas got a reaction from Casselease in 2 column in mobile view   
    Hi, you can use below code to get rid from the spacing. simply copy paste below code into CSS editor
    @media (max-width: 520px) {
        #page-section-6079eef730a0cf157bbfc577 {
            .span-12 .row {
                .span-6 .html-block {
                    padding: 0 17px !important;
                }
            }
        }
    }
  3. Like
    Agha_Waqas got a reaction from tuanphan in 2 column in mobile view   
    Hi, you can use below code to get rid from the spacing. simply copy paste below code into CSS editor
    @media (max-width: 520px) {
        #page-section-6079eef730a0cf157bbfc577 {
            .span-12 .row {
                .span-6 .html-block {
                    padding: 0 17px !important;
                }
            }
        }
    }
  4. Like
    Agha_Waqas got a reaction from Wolfsilon in Adding a vector image as a highlight to text   
    Hi Sam. you can use these vector image (png format) as an background image. Add a text and where you add this effect simply make a bold/italic property for it so you can easily target that one word. Upload each image onto squarespace and get the link.

    h2 em {
    font-style: none !important;
    background: url(// aad link here) no-repeat;
    background-size: contain or cover // Use any of this
    }

    and if you want to add these image specific html block then simple grab the ID of the html-block and wrap above text in it, example below

    #Block-id {
    h2 em {
    font-style: none !important;
    background: url(// aad link here) no-repeat;
    background-size: contain or cover // Use any of this
    }

  5. Like
    Agha_Waqas got a reaction from ab24 in How to resize this image(logo) in the footer section   
    use this code 
    #block-yui_3_17_2_1_1621115524816_27495 .intrinsic { max-width: 150px !important; }
  6. Like
    Agha_Waqas got a reaction from BoulevardNorth in Resizing Form Lightbox Button   
    Hi. Add below code into CSS editor. Adjust the padding and font according to your need. 
    .form-block .lightbox-handle { font-size: 20px !important; padding: 1.5em 2.5em !important;}
  7. Like
    Agha_Waqas got a reaction from tuanphan in Resizing Form Lightbox Button   
    Hi. Add below code into CSS editor. Adjust the padding and font according to your need. 
    .form-block .lightbox-handle { font-size: 20px !important; padding: 1.5em 2.5em !important;}
  8. Thanks
    Agha_Waqas got a reaction from Guillermiiiin in Social media icon hover color   
    Hi. try this code.

    .sqs-svg-icon--list {
        a:hover {
            opacity: 1 !important;
        }
        a:hover .sqs-use--icon {
            fill: #EF233C !important;
        }

  9. Like
    Agha_Waqas got a reaction from joe7654321 in Changing logo size on mobile - 7.0 Wells   
    add below code into CSS editor. and adjust the width according to your needs,
    @media (max-width: 800px) {
        .logo {
            a img {
                width: 200px !important;
            }
        }
    }
  10. Like
    Agha_Waqas got a reaction from tuanphan in Custom Font for Store Titles   
    apply this code into css editor

    .ProductList-item h1.ProductList-title { font-family: 'Souvenir' !important; }
  11. Like
    Agha_Waqas got a reaction from tuanphan in Image Stack on 'Tablet' Size in 7.1   
    Hi. Add below code into CSS editor

     
    @media (max-width: 800px) {
        .design-layout-card {
            flex-direction: column !important;
            .intrinsic,
            .image-card-wrapper {
                width: 100% !important;
            }
        }
    }
  12. Love
    Agha_Waqas got a reaction from tuanphan in Accordion coding not working   
    Hi, It seem like you did copy paste code and did not update it according to your heading size.

    go to you JavaScript and CSS code which you get from that article replace h2 to h4 on both codes (Javascript and CSS)
    <----- Updated code -----> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h4').css('cursor','pointer'); $(".markdown-block .sqs-block-content h4").nextUntil("h4").slideToggle(); $(".markdown-block .sqs-block-content h4").click(function() {$(this).nextUntil("h2").slideToggle();}); }); </script> Same thing do with CSS replace all h2 to h4.
  13. Love
    Agha_Waqas got a reaction from tuanphan in Can I reduce space between text blocks and styles?   
    hi. below is a code for this.  adjust the margins as you want.
    Design > Css Editor.

    #page section:first-child {
        .html-block {
            .sqsrte-small {
                margin-bottom: 0 !important; // First line margin adjustment
            }
            h1 {
                margin: 0 !important;  // Heading margin adjustment
            }
            p {
                margin: 0 !important; // last line margin adjustment
            }
        }
    }
  14. Like
    Agha_Waqas got a reaction from tuanphan in Custom CSS Code to optimize newsletter block on mobile   
    below is the code. please try and let me know if it works perfect for you.
     
    @media (max-width: 480px) {
        .newsletter-form-body {
            display: flex;
            .form-fields {
                width: 60%;
                .form-item {
                    width: 100% !important;
                    min-width: unset !important;
                    input {
                        width: 100%;
                    }
                }
            }
            .newsletter-form-button-wrapper {
                width: 40%;
                .newsletter-form-button {
                    padding: 1.4rem 1rem !important;
                }
            }
        }
    }
     
  15. Like
    Agha_Waqas got a reaction from Sienawalker in Align text to the bottom on image poster block   
    Hi add this code into CSS editor
    .sqs-block-image .design-layout-poster .image-card-wrapper {
        justify-content: flex-start !important;
        align-items: flex-end !important;
        padding: 20px;
    }
  16. Like
    Agha_Waqas got a reaction from sophiaojha in Change a forms "Selection" options font size, Squarespace 7.1   
    You can use the custom CSS code for it,
    Add below code into custom css editor
    .sqs-block-form .field-list select { font-size: 20px !important; }
  17. Like
    Agha_Waqas got a reaction from granthenrymedia in Decrease Margins in Hayden Template Products Page   
    Your welcome. 
  18. Like
    Agha_Waqas reacted to granthenrymedia in Decrease Margins in Hayden Template Products Page   
    Super. Thank you so much. I can't tell you how long I was trying to figure this out on my own with a very basic knowledge of CSS! 🙂
  19. Like
    Agha_Waqas got a reaction from EarvinChong in Decrease Margins in Hayden Template Products Page   
    upload the image on CSS editor and update the background image link in my code. and adjust the width and height accordingly.
    #collection-5fac98f2ff73a225b2353077 {
         #content:before {
            font-size: 0;
            background: url(' // add image url ') no-repeat;
            background-size: contain;
            width: 100px;
            height: 100px;
            margin: 0 auto 50px auto;
        }
    }
  20. Like
    Agha_Waqas got a reaction from Everett1570047814 in Custom Font for Mobile Menu Folder - Avenue Template   
    your welcome. 🙂
  21. Like
    Agha_Waqas got a reaction from EarvinChong in Decrease Margins in Hayden Template Products Page   
    add below code and see
    #collection-5fac98f2ff73a225b2353077 {
        #page {
            max-width: 100% !important;
        }
        #productList {
            max-width: 100% !important;
            margin-top: 0 !important;
            margin-left: 0 !important;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-column-gap: 30px;
            grid-row-gap: 30px;
            width: 100% !important;
            .product {
                margin-left: 0 !important;
                margin-top: 0 !important;
                width: 100% !important;
            }
        }
        @media (max-width: 1024px){
            #productList {
                 grid-template-columns: 1fr 1fr !important;
            }
        }
        @media (max-width: 620px){
            #productList {
                 grid-template-columns: 1fr !important;
            }
        }
    }
  22. Like
    Agha_Waqas reacted to Everett1570047814 in Custom Font for Mobile Menu Folder - Avenue Template   
    Sweet, that worked! I did have to an !important behind it though. Thanks a ton!
  23. Like
    Agha_Waqas got a reaction from Everett1570047814 in Custom Font for Mobile Menu Folder - Avenue Template   
    hi. you can use below code. add code within your mobile media query
    .folder-toggle-label { font-family: "MediumLLWeb-Regular.woff"; }
  24. Like
    Agha_Waqas reacted to krisTTG in Change a forms "Selection" options font size, Squarespace 7.1   
    That did it! Thank you so much Agha_Waqas! 
  25. Like
    Agha_Waqas reacted to JMSB in Mobile Customization   
    Worked perfectly! Thank you so much for your help!
×
×
  • 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.