Beyondspace
Circle Member-
Posts
9,991 -
Joined
-
Last visited
-
Days Won
80
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by Beyondspace
-
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
-
Can you share your site so I can check it?
-
Thanks, I just replied via email
-
Code for Sticky overlapping sections not working
Beyondspace replied to byboldstudio's topic in Customize with code
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? -
How to enable "Add to Cart" for specific items only?
Beyondspace replied to Beyondballhawaii's topic in Customize with code
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 -
Product category page = 3 columns, product page = 1 column.
Beyondspace replied to Ianthe's topic in Customize with code
-
How to make drop down menu folder transparent
Beyondspace replied to lion_the_el's topic in Customize with code
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- 24 replies
-
Different Footer Background Image for Each Page
Beyondspace replied to hannahnowlan's topic in Customize with code
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)- 10 replies
-
Different Footer Background Image for Each Page
Beyondspace replied to hannahnowlan's topic in Customize with code
- 10 replies
-
Different Footer Background Image for Each Page
Beyondspace replied to hannahnowlan's topic in Customize with code
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; }- 10 replies
-
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; } }
-
How to make drop down menu folder transparent
Beyondspace replied to lion_the_el's topic in Customize with code
Can you share your site so I can check?- 24 replies
-
Product category page = 3 columns, product page = 1 column.
Beyondspace replied to Ianthe's topic in Customize with code
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 -
Margot Template Slideshow + Banner in Mobile
Beyondspace replied to afinocchiaro's topic in Customize with code
Can you give your site so we can take a look? -
Can you share your site so I can take a look?
-
How to Hide the Mobile Header on Perform for Life SF
Beyondspace replied to rati_fegihi3's topic in Customize with code
I can not see the header on mobile now. Have you figured it out? -
Can you share your site and the final result you want to achieve?
-
Change Image when Hovering over a word
Beyondspace replied to Tom1414's topic in Customize with code
You can try using the portfolio page with the hover background Layout. This layout has similar effect as the website you give example -
Product category page = 3 columns, product page = 1 column.
Beyondspace replied to Ianthe's topic in Customize with code
Can you share the direct links to those pages so I can take a look? -
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
-
-
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; } }
-
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?
- 2 replies
-
- logo
- custom-css
-
(and 1 more)
Tagged with: