Jump to content

Beyondspace

Circle Member
  • Posts

    9,991
  • Joined

  • Last visited

  • Days Won

    80

Everything posted by Beyondspace

  1. You can try the following code section[data-section-id="65de4818b8645b5b997c772c"] .gallery-grid-wrapper { grid-template-columns: repeat(8, 1fr) !important; } section[data-section-id="65de4818b8645b5b997c772c"] .gallery-grid-item { grid-column: span 2; } section[data-section-id="65de4818b8645b5b997c772c"] .gallery-grid-item:last-child:nth-child(4n-3); grid-column-end: 6; } section[data-section-id="65de4818b8645b5b997c772c"] .gallery-grid-item:nth-last-child(2):nth-child(4n+1) { grid-column-end: 5; } section[data-section-id="65de4818b8645b5b997c772c"] .gallery-grid-item:nth-last-child(3):nth-child(4n+1) { grid-column-end: 4; } Let me know how it works
  2. The first section cover almost 100% view If we set stick/fixed for first section, we can not see the below sections. Can you describe more detail your idea?
  3. Each product page on squarespace has a unique id. You can use your above code with item id to set the appropriate style for add to cart button You can the following extension to get page id: squarespace id finder - Google Search
  4. On my desktop, it has only one column on London Page Have you checked it again?
  5. I think we should set it a little transparent with the following code #topNav nav .folder-collection .subnav { background: rgba(45, 42, 42, 0.8); } My testing
  6. both of them are fine. website css is recommended, page advance code require <style> tag Yes, you are right. You can install the following extension to get Squarespace id: Squarespace ID Finder (google.com)
  7. You can try /*Combine with page Id to set background for specific page*/ footer .section-background-canvas.background-fx-canvas { visibility: hidden; } /*Combine with page Id to set background for specific page*/ footer .section-background-overlay { background-image: url(https://images.unsplash.com/photo-1683009427470-a36fee396389?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8); /*add your image url here*/ opacity: 1 !important; }
  8. You can try the following css code @media only screen and (max-width: 767px) { .header-display-desktop { display: none; } } @media only screen and (min-width: 768px) { .header-display-desktop { display: flex; } .header-display-mobile { display: none; } .header .header-title-nav-wrapper .header-nav { display: block; } .header-layout-nav-right .header-title{ flex: unset !important; } .header-burger { display: none } .header .header-announcement-bar-wrapper { padding-top: .1vw; padding-bottom: .1vw; padding-left: 3vw; padding-right: 3vw; } }
  9. From your description, I understand that: - On Our Properties — Ianthe House, you need 3 columns (side by side) - On the categories pages (children of Our Properties — Ianthe House), it still keeps 1 column Is it correct? If it is, you can try the following CSS code @media only screen and (min-width: 768px) { .nested-category-children ~ .products-flex-container .list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } My testing Shop page Categories Page Hope it can help
  10. Can you share your site so I can take a look?
  11. I can not see the header on mobile now. Have you figured it out?
  12. Can you share your site and the final result you want to achieve?
  13. You can try using the portfolio page with the hover background Layout. This layout has similar effect as the website you give example
  14. For the mobile, you can try the following Css code @media only screen and (max-width: 767px) { .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry-wrapper.gallery-masonry-list--ready { display: flex; flex-wrap: wrap; height: auto !important; } figure.gallery-masonry-item { position: relative !important; display: flex; flex-direction: column; width: 100% !important; transform: unset !important; } .gallery-caption-content { position: relative; } .gallery-caption.gallery-caption-grid-masonry { width: 100%; max-width: unset; } .gallery-masonry-item-wrapper a:after { content: unset; } } My testing
  15. For desktop view, you can try the following code @media only screen and (min-width: 768px) { .gallery-masonry-item .gallery-caption-content { visibility: hidden; } .gallery-masonry-item:hover .gallery-caption-content { visibility: visible; } }
  16. I find thé following code make that navigation on the right disappear You can try the following code to overwrite it .header-nav-item.header-nav-item--collection a { opacity: 1; color: var(--solidHeaderNavigationColor); } Hope it can help
  17. I check that there are some effects at this section: - Hovering logo would switch to a new one - After an amount of time, one of the logos is automatically switched to the new one. Which one do you want to proceed with? It requires javascript to run, do you have the business plan or above?
×
×
  • 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.