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


Circle Member
  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by brandon

  1. @jwharton: Give this a shot. I did not test it on actual mobile devices, so you'd want to do that after implementing: .mobile-nav-open #siteWrapper { position: static !important; } -Brandon
  2. This has to do with AJAX loading. Your previous template probably didn't have it, but Margot does. Disable it, or encapsulate your code in a manner that accounts for it.
  3. @jaisequoia: Thanks for letting me know. I've re-enabled the demo site. If you have any questions, drop me a line.
  4. Regarding the logo wall, that's strange @jonaverill. I'll have to swing back and see if I can duplicate it using a single section. Regarding adding a link to a gallery image: I find adding links to gallery images in 7.1 to be quite fiddly. I'll set a link, click on another image, make some changes, then save the section. When I go back, the link I added isn't saved anymore. I found it works best if I set the link then immediately hit the "Close" link on the section. I've updated the code in my original answer to accommodate gallery items that have links added to them. It requires just a couple minor changes to both the JavaScript and the CSS. I don't think it's possible to add links to "slideshow" type galleries of any kind. I guess that sort of makes sense, but I wanted to point that out.
  5. Hi @Benedetto. The example code is fairly generic. It's simply a matter of changing the selector (in this case ".collection-5d7a891600952e518d49e751 .project-image") to whatever applies to your use-case. One can use browser developer tools / web inspector to locate the collection ID or other selector information, make the adjustment, then add via Custom CSS. As is often the case, if you need something more specific, it's best to include a link to the page in question, a description of what you want to achieve on the page. If that's the case, consider editing your message above to include that info (rather than posting a new message, which adds to the length of the thread here).
  6. Updated answer. Note that you may also need to set your gallery options so that it automatically crops images.
  7. Yes, there is: .sqs-announcement-bar-close { display: none; } -Brandon
  8. Henry, Give this a shot, inserted via Custom CSS: #collection-5dbeb8db6164d93f9b647c33:not(.sqs-edit-mode) { .sqs-block-gallery { width: 100vw !important; height: 100vh !important; position: fixed; padding: 0 !important; } #footerWrapper { display: none; } } Now, I didn't heavily test that, but it'll get you started. Keep in mind that the CSS is setup to only work when you're viewing your site outside of edit mode (not logged in). That way, you can still edit the gallery as you'd expect, but when visitors see the page, it'll be a full-screen gallery.
  9. Hi @Henry_lmb. In some cases this can be accomplished via CSS alone, setting the width of the block based on the viewport width, allowing overflow of the parent and adding the text via pseudo-elements. A link to the page in question with the gallery on it (and the view-only password set via site-visibility, if necessary) would help others provide more specific code. -Brandon
  10. Hi @carliemcgarity. Try inserting the following via Custom CSS: .no-touch .collection-5d7a891600952e518d49e751 .project-image { -webkit-filter: grayscale(100%); filter: grayscale(100%); &:hover, &:focus { -webkit-filter: grayscale(0%); filter: grayscale(0%); } } Let us know how it goes. -Brandon
  11. Hi there. Insert the following via Custom CSS: .Header { position: -webkit-sticky; position: sticky; top: 0; z-index: 890; } .collection-type-blog.view-list.tweak-blog-list-full-bleed:not(.tweak-blog-list-filter-show) .Header, .collection-type-blog.view-list.tweak-blog-list-full-bleed.tweak-blog-list-filter-show:not(.has-active-filter) .Header, .collection-type-blog.view-item.tweak-blog-item-header-full-bleed .Header { position: fixed; } -Brandon
  12. Hi @briang97603. This is achievable via either JavaScript or CSS. Option 1: JavaScript .This would be more complicated and would require swapping src attributes and other attributes in order to make use of Squarespace's dynamic image sizing, ImageLoader. Option 2: CSS Background Images. CSS is simpler if you only load a single, high-resolution alternate image via the background-image CSS property. Using media queries, you'd then hide the <img> itself via either opacity, visibility, position, etc. I suppose you could also use media-queries to load various alternate images of various resolutions/sizes if you really wanted to. Usually, with Squarespace sites, I tell people to just load a single high-resolution image because it's usually not significant compared to the collective size of the page. Some CSS will be required to resize the gallery itself. In any case, you can upload the images via file storage or via an image gallery collection, etc. Then, use those file paths as the alternate img file paths, whether using JavaScript or CSS. Option 3: Two gallery blocks & CSS. Put the skyscrapers in one, and the square ads in the other. Use CSS media queries to show one gallery on desktop and show the other on mobile. That would look something like this (Where the code says "TBD" is where the block ID of the square gallery would be. You can identify block IDs using your browser's developer tools/web-inspector.): /* Show skyscraper */ #block-yui_3_17_2_1_1537482878901_13769 { display: block; } /* Hide square */ #block-yui_TBD { display: none; } @media only screen and (max-width: 640px) { /* Hide skyscraper */ #block-yui_3_17_2_1_1537482878901_13769 { display: none; } /* Show square */ #block-yui_TBD { display: block; } } The first option may take an experienced Squarespace dev. 4 hours or less to do in a way that allowed you to maintain it over time, changing ads. The second would probably take 2 hours or less, and the third an hour.
  13. Hi @jonaverill. If it's a gallery section that you've added logo images too, then it's a matter of passing the appropriately-exclusionary CSS selector to the function so that certain sections aren't selected. Another option is to set a space as the description for the image. See the second two bullet points under "JavaScript" in my post. If it's a "logo wall" section you're talking about, I wasn't able to reproduce the issue. So if that's the case, could you provide a link to the page in question? If it's a different sort of section you've added (that is, not a gallery section of some kind), what section was it?
  14. How long is your video @angela3, and how large is the file once it's compressed as much as you can tolerate?
  15. Alright, here's a repost for those that cannot access that particular post:
  16. Something to consider on the Hayden template: Using a fixed announcement bar may cover up the navigation undesirably when scrolled to the top of the site. Using a fixed announcement bar may cover up the navigation when the on-scrolled navigation shows up. To deal with these, you could use "sticky" instead of "fixed" and hide the navigation when the user is scrolled down the page. To do that, use the following CSS: .sqs-announcement-bar-dropzone { position: -webkit-sticky; position: sticky; top: 0; z-index: 10001; } .show-on-scroll-wrapper.show { display: none; } -Brandon
  17. Something simple like this should work: .Cart[aria-label^='0'], .Cart:not([aria-label]) { display: none; } Let me know how that works for you. It's not something I heavily tested. If it does work, it could be modified using opacity and transitions instead. Related: https://forum.squarespace.com/topic/2639-hide-cart-until-items-in-the-cart/?tab=comments#comment-15354 https://forum.squarespace.com/topic/4550-hide-cart-icon-unless-product-in-cart/?tab=comments#comment-26867 Also, is it just me or is there no way to get to the checkout on mobile using the Foster template? Using the demo site, there was no link to the checkout at any point in my mock-shopping. -Brandon
  18. Hi Dani. Unfortunately I'm a bit swamped at the moment, and the code used on the example site is a prototype, is over-complicated and prone to failure. It's probably not ready to be put into production, since it would need a few more features added to check for various conditions (like content length) and adjust accordingly. I do hope to come back to this soon and post a more flexible solution. Also, your English is much better than my German! My suggestion about the post title was simply to include as many similar terms as possible, so that others may be able to find your question even if they type in something slightly different. -Brandon
  19. Related: https://forum.squarespace.com/topic/4513-send-users-to-cart-view-after-adding-item-to-cart/
  20. Yes, this was due to using "end" instead of "flex-end" in my original answer. I have updated the code. That is simply a matter of changing the "100%" to, say, "90%" in the code. By setting it to 90%, you're essentially saying that you want it to be the color (233, 210, 192, 1) (the "1" stands for 100% opacity) at 10% before the bottom.
  21. Hi @OneKindKevin. If the gradient is what you're concerned with primarily (as opposed to wanting to use an entirely different photograph on mobile) it looks to me like something that can be accomplished via CSS. Something like this, inserted via Custom CSS: @media screen and (max-width:640px) { .Index-page-content { justify-content: end !important; padding-bottom: 8% !important; } #banner { background: -moz-linear-gradient(top, rgba(0,0,0,0) 35%, rgba(233,210,192,1) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 35%,rgba(233,210,192,1) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 35%,rgba(233,210,192,1) 100%); } } Do let me know how that works for you. -Brandon
  22. Hello. Consider adding a link to the site/page in question. That often helps others diagnose the issue then write and test solutions.
  23. To remove the pipe ("|") after the last item, use @tuanphan's code but change the first line to .Header-nav-item:not(:last-child):after { .
  • Create New...