Jump to content

Agha_Waqas

Member
  • Posts

    133
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by Agha_Waqas

  1. Hi. i just noticed in developer console it shows error. will you double check in the footer section the <script> tag you are using, did you close it like this </script>. due to this markdown code is not working may be <script> //js code </script> and also i see you added the style tag around the JavaScript code. Correct code is below. copy paste below code into header page. remove yours. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h4').addClass('ui-closed').css('cursor','pointer'); $(".markdown-block .sqs-block-content h4").nextUntil("h4").slideToggle(); $(".markdown-block .sqs-block-content h4").click(function() { $(this).nextUntil("h4").slideToggle(); $(this).toggleClass('ui-closed ui-open'); }); }); </script> <style> .markdown-block p { margin-left:1.5em; } .markdown-block .ui-closed:before { font-family:monospace; content:"+ "; } .markdown-block .ui-open:before { font-family:monospace; content:"- "; } </style>
  2. Hi. you need to wrap your code with <style> tag. below is a example <style>//Add CSS code here</style>
  3. 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;}
  4. Hi i just checked your website and it seems like button is exist there but due to background and text color white it show it is missing. you can adjust color from the styles or use below code for it. .header-menu .header-menu-cta a { color: #080d9b !important; background-color: #fe771c !important; border-color: #fe771c !important; }
  5. it isn't working. please double check on your side.
  6. Hi. try this code. .sqs-svg-icon--list { a:hover { opacity: 1 !important; } a:hover .sqs-use--icon { fill: #EF233C !important; } }
  7. add below code into CSS editor. and adjust the width according to your needs, @media (max-width: 800px) { .logo { a img { width: 200px !important; } } }
  8. Can you please share the website link
  9. Hi. you can simply target it from the class name. code: .css-11cewt9 { display: none; } This code will hide the anchor <a> from your website.
  10. apply this code into css editor .ProductList-item h1.ProductList-title { font-family: 'Souvenir' !important; }
  11. 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. Hi. Add this code into CSS editor @media (max-width: 600px) { .sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-right .intrinsic { left: 0 !important; } }
  13. 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; } } } } }
  14. 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; } } }
  15. 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 } } }
  16. 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.
  17. 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; }
  18. 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; } } } }
  19. yes we can. attachment is the screenshot how it will looks in one line. If you want it tell me i will send you code.
  20. Try this custom code and paste into CSS editor for responsiveness .embed-block iframe { max-width: 470px; width: 100% !important;}
  21. Add this code into CSS @media (max-width: 480px) { .mouse { display: none; } }
×
×
  • 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.