Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by JayVanDyke

  1. @Shingston try adjusting @Lesum code to be 20px instead of 0. It looks like thats what you have set as your column gap.
  2. @Fromswedenwithlove anything you can do within a section works. You could do a background video or a full width and height video block to achieve what you're trying to I bet. Background video is probably better if you want it to autoplay and don't need any sound.
  3. Yes, so SS is adding a class to each item as you scroll down the page. You would need to write a script that does the same thing to achieve the same functionality. I would let them know, i can't imaging this isn't a bug.
  4. @Fromswedenwithlove This isn't something you can do without code in SS so to make your life easier I would use this will myers plugin. Lots of other features too so worth the money if you're a developer/designer, in which case I would get the business license (its an affiliate link).. https://www.bergendesign.co/split-screen-layout Using the platform as is, I would uncheck the "fill screen" box for the section and make the grid spacing 0. Then add 2 images and 2 text blocks, make them each half the screen and full height. To get 100vh you will either need to add some custom code like this below or you'll need to eyeball it. sectionID { min-height: 100vh !important; }
  5. @DoppyG Hmm.... for some reason those elements don't seem to get any of the fade in class stuff. Try this in custom CSS. @keyframes fadeAuthor { 0% { opacity: 0; } 100% { opacity: 1; } } .blog-meta-section .blog-author { opacity: 0; animation: fadeAuthor 1.5s ease 0.111724s forwards; }
  6. @nebula where do you want the icons to go? Nav bar, page section, footer, mobile menu overlay, etc... If they are just getting hidden everywhere else but shown on this page usually what I would do is set it up to show everywhere and then use some code to hide it except for the page you want it.
  7. @Rodney1234 There may be a background option in the block settings but to make it easier I would just add a shape block and put it behind the block you have there.
  8. @Chlobot after the padding stuff but right before the .grid-item add this max-width: none !important;
  9. @Chlobot I’m not sure what you mean by 15”. Can you share a screenshot? Physical measurement of the screen doesn’t really correlate to the code, only things like pixels. Do you mean it eventually starts to show strips on the sides of the screen again when the window gets larger?
  10. @ashgirl2000 you can accomplish all of the same stuff here without setting things to sold out but this should get rid of the sold out text. If you set some to not sold out and want to point me to those products we can add some css for that too, then you don't have to worry about the inventory or pricing at all. .products.collection-content-wrapper .grid-meta-status { display: none !important; }
  11. @kkf_magi no it shouldn't matter. If they are completely behind the text then you can have things overlap however you need to! If its that they need to be stacked you'll want to do the same thing with the image blocks to avoid overlaps.
  12. @Chlobot maybe this? .lessons-list-section { .content-wrapper { padding-left: 0 !important; padding-right: 0 !important; .grid-item .lessons-image { margin-bottom: 0 !important; } } } And for the spacing between videos you can set that in the section settings here.
  13. @Ramon-east try this article. It's the javascript thats adding that weird little extra box that breaks the editor. https://www.beatrizcaraballo.com/blog/code-block-space-squarespace-fluid-engine
  14. @kkf_magi Try this, when editing switch to your mobile view and make sure your containers are not overlapping each other. First screenshot is with the container over the other box and the next shows where the boxes should be ending. If you make the box bigger than the content then it will allow the text to wrap into that empty space. If you end the box before the next text box it will just bump it down on the page. Sometimes you still need to overlap to achieve a specific design but typically unless you're really careful and know how to make it work it makes sense to have them not be on top of each other.
  15. @ashgirl2000 try this .product-details .ProductItem-product-price { display: none !important; }
  16. @Terratag great! If its working you can mark it as a solution so that others can find it.
  17. @Terratag try this out. It looks like you have a typo first of all... so let's fix that. Try this code. Add or change margins under each one to adjust spacing since its possible that will be off with a different order of elements. Just uncomment the margin and change the 0 to something else. #page .ProductItem-details-checkout { display: flex; flex-direction: column; .ProductItem-details-excerpt { order: 1 !important; //margin-bottom: 0px; } .product-variants { order: 2 !important; //this looks to be already set. //margin-bottom: 0px; } .ProductItem-product-price { order: 3 !important; //margin-bottom: 0px; } .ProductItem-quantity-add-to-cart { order: 4 !important; //margin-bottom: 0px; } }
  18. The wide spacing you have is going to be impossible to setup without wrapping with CSS. And achieving some kind of evenness with your logo is possible but totally done by eyeballing it since the two elements aren't actually related to each other in the html. You're now making each nav item 130px plus we have extra padding between each one which brings them around 150px total, then your logo is set at 200px. We're also then leaving an extra 25px for the logo spacing. This puts all this stuff to around 1100px + with only the padding on either side of the links able to adjust based on screen width. You're trying to achieve a responsive split menu (that squarespace doesn't offer) and keep wide spacing even as the screen runs out of room for those large numbers. I honestly don't think there's anyway for you to achieve something that flexible with your constraints and this as a workaround to your menu without changing the width of the nav items to something smaller and then maybe making the padding a different dynamic value and then change that value as the screen gets smaller with different breakpoints. The only way to do this without a ton of css code will be to upgrade and use javascript. If you want to do breakpoints for the width of the nav items you could use this template and keep trying numbers as you go. These are just arbitrary numbers so you'll need to adjust and possibly add more breakpoints all the way down to 800px when it switches to mobile nav. @media only screen and (max-width: 1300px) { width: 120px !important; } @media only screen and (max-width: 1200px) { width: 110px !important; } @media only screen and (max-width: 1100px) { width: 100px !important; } @media only screen and (max-width: 1000px) { width: 90px !important; }
  19. @sokkamf yea a few issues. Some of this needs to just be more specific in the code so I've got that updated to try. Another one is that this code isn't doing anything at all since you don't have a logo but you're using text instead // Keeps title logo clickable .header-title-logo a { z-index: 1000; position: relative; } This also seems like its not exactly what I had sent over It needs to be the same as below. The 0s make sure it stays set to 200px so we're saying flex-grow: 0 and flex-shrink: 0 and flex-basis: 200px. If you do flex 1 1 200px then it can both grow and shrink larger than 200px. flex: 0 0 200px; Try replacing the whole thing with this .header-layout-branding-center-nav-center .header-display-desktop { .header-actions { width: 0%; } .header-title-nav-wrapper { flex: 1 0 100%; .header-title { width: 200px; flex: 0 0 200px !important; z-index: 999999999; } .header-nav { width: 100%; flex: 1 1 100%; position: absolute; top: 0px; bottom: 0; margin-top: 0 !important; margin-left: 0px !important; .header-nav-list .header-nav-item { margin-right: 0 !important; margin-left: 0 !important; width: 80px !important; @media only screen and (min-width: 900px) { padding: 0 1%; } &:nth-of-type(3) { margin-right: 300px !important; } } } } }
  20. If you want me to try and debug I'll need you to put all the code back in
  21. @sokkamf solving this with pure CSS is definitely a challenge but probably you'll just need to do some adjustments at different breakpoints or do some more fine tuning of your numbers. Here's a few things that might help get this working better. When I set all these in my browser it seems to pretty much work all the way down to 800px when it flips to the mobile menu style. I would set this to not have the ability to grow or shrink but sticks to a specific size. 200px works decently on desktop but obviously feel free to tweak it a bit. This solves a few things, it gives us a fairly consistent width to work with and it also stops the issue of not being able to click on your links. .header-title{ width: 200px; flex: 0 0 200px; z-index: 999999999; } Then I might make this be 100% of the width instead of 80 just so you have a little more room as the page size shrinks. .header-nav{ width: 100%; flex: 1 1 100%; } Make your actual links a specific size too and have no margins. Padding works a bit in the bigger sizes but smaller its hard to get it to not wrap. .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item { margin-right: 0 !important; margin-left: 0 !important; width: 80px !important; @media only screen and (min-width: 900px) { padding: 0 1%; } } This margin now still works ok but you might be able to make that space a bit smaller. .header-nav-item:nth-of-type(3) { margin-right: 225px!important; //a little bigger than the title }
  22. Same comment as before on specificity. You're not specific enough in this code, some things may cascade down to the element you're trying to affect but essentially what you're saying in this code is that the container that is holding the text element needs to have that font, font size, and color not necessarily the text element itself. That may trickle down to the element if it doesn't have anything set or if your set of selectors is more specific than the ones Squarespace is using. If its a paragraph element you need a p after the 7611 or if its some other type of block with a different selector you'll need that to get it to work. Sometimes this still isnt enough and if you've used the color picker inside the text block you'll need to add a "p span" into there but at that point you might as well set the color inside the text editor instead of with code.
  23. Do you mean that you want to load up a font that isn't currently set in site styles and assigned to your site anywhere? Squarespace does not seem to load fonts that you're not actively using. In the past what I've done as a workaround is to temporarily set that font and then use the inspector to find where SS is importing or loading it from.
  • 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.