Jump to content

tuanphan

Circle Member
  • Posts

    63,791
  • Joined

  • Last visited

  • Days Won

    511

Everything posted by tuanphan

  1. I forgot, the code doesn't work on mobile, you can use this new code <script> if (document.location.pathname.indexOf("/original-artwork/") == 0) { document.querySelector('body').classList.add('shop-artwork') } </script> <style> body.shop-artwork header#header div.header-nav-item:first-child [href*="original-artwork"] { color: #f56400 !important; text-decoration: line-through !important; } body.shop-artwork header#header div.container.header-menu-nav-item:first-child [href*="original-artwork"] { color: #f56400 !important; text-decoration: line-through !important; } </style>
  2. You can use this code to Custom CSS @media screen and (min-width: 992px) { h1.portfolio-hover-item-title { font-size: 80px !important } } @media screen and (max-width: 991px) { h1.portfolio-hover-item-title { font-size: 40px !important } h1.portfolio-hover-item-title span { font-size: 20px !important } } .portfolio-hover-display { min-height: 100vh !important }
  3. To make vertical images we can use Gallery Section Grid (then use code to make it show 1 image/row). To make gallery image - text section side by side, we can use code. Demo: https://tuanphan3.squarespace.com/vertical-image-stack-scroll?noredirect Pass: abc All steps should be (1) Add this code to Website Tools (under Not Linked/Hidden) > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('.custom-slider-item').closest('section.page-section').addClass('custom-slider-item'); $('section.custom-slider-item').wrapAll('<section class="custom-slider-parent"></section>'); }); </script> <style> @media screen and (min-width:768px) { section.custom-slider-parent { display: flex !important; flex-direction: row; align-items: flex-start; } section.custom-slider-parent>section:nth-child(2) { position: sticky !important; position: -webkit-sticky !important; top: 0 !important; } section.custom-slider-item .gallery-grid-wrapper { grid-template-columns: repeat(1,1fr) !important; grid-gap: 0 !important; padding: 0 !important; }} </style> (2) Add 2 sections Top is Gallery Grid Second is standard section (3) Enable Gallery Grid Caption (4) Edit first image > Paste this code <span class="custom-slider-item"></span> (5) Edit Text Section > Add a Code Block > paste this code <span class="custom-slider-item"></span>
  4. Hi, You try change text to another font name (font family)
  5. I rarely put Home in Main Navigation. I think many people already know that clicking on the logo will always return to the home page, so I don't think it's important to place a Home item.
  6. Actually, we can use CSS code to reduce background image size to smaller, to achieve your second screenshot. If you share link to page, we can give the code
  7. Accordion Title uses Heading 4 (h4) but I see you use CSS code to set another font for h4 to set 'basier-square-regular' for accordion title, add this CSS code under div.accordion-block h4 { font-family: 'basier-square-regular' !important; }
  8. The code should work, which exact position you added in CSS box? Can you keep my code in CSS box? I can check again easier
  9. Add to Website Tools (under Not Linked) > Custom CSS. If it doesn't work, please share link to a product, we can check easier @media screen and (min-width:768px) { .tweak-product-basic-item-gallery-design-stacked .ProductItem-gallery-slides-item { margin-bottom: 0px !important; } .tweak-products-width-full .products.collection-content-wrapper { padding-top: 0 !important; padding-left: 0 !important; } nav.ProductItem-nav { position: absolute; left: 3vw; z-index: 99999; background-color: white; padding: 0 !important; }}
  10. Add this to Custom CSS .header-title-logo a:after { position: absolute; left: 50%; transform: translateX(-50%); }
  11. I see you marked it as answered. Do you still need code or you solved it?
  12. What is site & which exact code did you add?
  13. If you want to disable section 6 sticky, use this code section:nth-child(6) { position: relative !important; }
  14. I remember gallery slideshow caption has a limit height of 100px. You can use this new code to move text over Slideshow, instead of use top 40% figcaption.gallery-caption.gallery-caption-fullscreen-slideshow { top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; margin: 0 !important; max-width: 1000px !important; height: auto !important; } If it doesn't work, please share site url, we can check easier
  15. @arhandjela the site is private, you need to setup an access password, then we can access it
  16. I see you solved by setting this CSS code? p { font-size: 12px !important; line-height: 19px !important; letter-spacing: 1.5px !important; }
  17. Hi, No way to add h5 option to Site Styles Tool Bar You need to use custom CSS to assign h5 style to specific element You can share link to element where you want to apply this + which style, we can help with code
  18. You can use CSS pseudo to do this Can you share site url? We can check easier
×
×
  • 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.