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

Agha_Waqas

Member
  • Posts

    121
  • Joined

  • Last visited

  • Days Won

    1

Reputation Activity

  1. Thanks
    Agha_Waqas got a reaction from kristobans in Image card block on the mobile.   
    Hi. Add below code into CSS editor

     
    @media (max-width: 900px) {
      #page-607e58d7db63ee562a23b8e5 {
      .span-6 {
          width: 100% !important;
          float: none !important;
          .design-layout-card {
            display: flex !important;
            justify-content: space-between !important;
            .intrinsic {
              width: calc(30% - 1%) !important;
            }
            .image-card-wrapper {
                margin-left: 2% !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                min-height: 100% !important;
                width: calc(70% - 1%) !important;
            }
          }
        }
      }
    }
  2. 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.
  3. 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
            }
        }
    }
  4. Thanks
    Agha_Waqas got a reaction from kristobans in Put a frame around the image stack block.   
    Hi. I just review your website. you can use below code for it and remove your one. 

    .design-layout-stack {
    border: 1px solid #000;
    padding: 10px;
    min-height: 400px; // adjust min height here to make all block with same height.
    }

    and if you want to code the image block where you all ready code add. target the collection id and wrap your code within it. below is a code for the specific page and targets the image block. but this will applied to all type of image style so better way is to use the above code you can try both code and use the code which is best suitable for you.

    #collection-607e58d7db63ee562a23b8e5 {
        .Main {
            .image-block {
                border: 1px solid #222;
                padding: 15px;
                border: 1px solid #222;
                min-height: 430px;
                margin: 2px;
            }
        }
    }
  5. 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;
                }
            }
        }
    }
     
  6. Like
    Agha_Waqas got a reaction from tuanphan in Full Width Navigation Menu + Border Styling   
    if not you can send invitation my email aghawaqas94@gmail.com. I will check it.
  7. 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;
    }
  8. Thanks
    Agha_Waqas got a reaction from alexandraglam in Full Width Navigation Menu + Border Styling   
    try now. it was working for me well. 
    .header-announcement-bar-wrapper {
        padding-left: 0;
        padding-right: 0;
        .header-display-desktop {
            flex: 0 0 100% !important:
            width: 100% !important;
            .header-title-nav-wrapper {
                flex: 0 0 100% !important;
                width: 100% !important;
            }
            .header-nav {
                padding: 4px 0;
            }
            .header-nav-list {
                display: flex !important;
                justify-content: space-around !important;
                .header-nav-item {
                    width: 20% !important;
                    margin-left: 0 !important;
                    margin-right: 0 !important; 
                    a {
                        background: none;
                        border-top: 1px solid !important;
                        border-bottom: 1px solid !important;
                        border-right: 1px solid !important;
                        padding: 0 !important;
                        text-transform: uppercase;
                        font-size: 14px;
                        letter-spacing: 0.1em;
                    }
                }
                .header-nav-item:last-child a {
                    border-right: 0 !important;
                }
            }
        }
    }
     
  9. Like
    Agha_Waqas got a reaction from tuanphan 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; }
  10. Like
    Agha_Waqas got a reaction from granthenrymedia in Decrease Margins in Hayden Template Products Page   
    Your welcome. 
  11. 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! 🙂
  12. Like
    Agha_Waqas got a reaction from granthenrymedia 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;
        }
    }
  13. Like
    Agha_Waqas got a reaction from Everett1570047814 in Custom Font for Mobile Menu Folder - Avenue Template   
    your welcome. 🙂
  14. Like
    Agha_Waqas got a reaction from granthenrymedia 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;
            }
        }
    }
  15. 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!
  16. 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"; }
  17. 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! 
  18. Like
    Agha_Waqas reacted to JMSB in Mobile Customization   
    Worked perfectly! Thank you so much for your help!
  19. Love
    Agha_Waqas got a reaction from krisTTG 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; }
×
×
  • Create New...