Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by JayVanDyke

  1. @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; } } } } }
  2. If you want me to try and debug I'll need you to put all the code back in
  3. @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 }
  4. 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.
  5. 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.
  6. Its just not finding your font file. Maybe try reuploading it and relinking in your css? Are you only using one of the weights for it? Maybe there's an issue with the variable font file?
  7. This is your internal link, we only need up to the first / unless youre trying to get me to a specific page. Where in your site is this block that you're targeting? Is it on the home page?
  8. I dont believe you can force this without just building out your own custom image gallery or maybe trying to learn how to use the image loader, however it shouldn't be loading in images that are lower resolution than the width of the container it's in. And they should sort of swap in place as the screen is resized to the correct one. Can you confirm that your getting images that are lower resolution than the size of their container? This fairly old post gives you some code to start with. http://seejohncode.com/2017/04/13/squarespace-imageloader-options/ See if that can help?
  9. @WebShark I would honestly rebuild this in a classic engine section instead of the fluid engine. When you go to add sections on the left side scroll to the bottom and and a blank classic one. That will not end up with all that extra space and will shrink and grow in height based on the visible content. The grid layout system might be whats causing this.
  10. can you share the link to your site? You. most likely need to target inside that block id to the actual text element h1, h2, h3, h4, p, .somethingElse etc.
  11. can you share the url to your site?
  12. Try this too... this gets rid of that space completely .lessons.collection-content-wrapper .nested-category-children { display: none !important; //remove the slashes in front of this one }
  13. You will never be able to add a text box to that section without using some kind of custom javascript and really there's no reason to when you can adjust the spacing with CSS or within the section settings. My code is to remove the space from above the videos. Then you add the text box section above it.
  14. If you want the text box you could try this in cusom CSS if there's no height controls for that page section. .lessons-list-section .lessons.collection-content-wrapper { padding-top: 3vw !important; //change this number. default for your page is 4vw } change that 3vw to whatever works best. It's currently 4vw so 3 may be enough for you when you put the code in.
  15. You cannot add a text box without adding a section to the top, the videos are in a gallery type section. Why don't you want to add a section up there? You should be able to adjust it's height and bottom padding enough to make it look like it's attached to those videos.
  16. No that’s a css thing. There may be some code for that in the installation page though at the bottom, there’s a section for styling. It just depends on what buttons and whether he’s provided that code there.
  17. That part is different. Remove everything between these two red marks including the comma and those curly brackets.
  18. under the sort settings in your code, change it to "false"
  19. I don't see the CSS implemented anywhere? These all need to be in your custom CSS and the background color part needs to be changed into the color you want. .kitchen #sections .page-section:first-child { .section-background { background-color: #000; //change to your color } } .style #sections .page-section:first-child { .section-background { background-color: #000; //change to your color } } .luxury #sections .page-section:first-child { .section-background { background-color: #000; //change to your color } } .tech #sections .page-section:first-child { .section-background { background-color: #000; //change to your color } } .health-leisure #sections .page-section:first-child { .section-background { background-color: #000; //change to your color } }
  20. @MikeM100 try something like this in your custom css. This should make everything 0 and lined right up but if you increase that bottom margin part in the second line you can adjust spacing as you want. .sqs-block-gallery .slide { margin-bottom: 0px; //increase this for your spacing between images .image-slide-anchor, .content-wrapper, .intrinsic-inner { padding-bottom: 0 !important; height: 100% !important; } .thumb-image, img { height: auto; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; display: block; } .sqs-video-overlay, .sqs-video-wrapper { position: relative !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; } }
  21. You need to use a collection like a blog to hold the images and descriptions and then use universal filter to make the filtering part work like this I did here https://www.motheruntitled.com/experts In this site, the coaches are each a blog post and the popup is from the blog post content itself, the grid is the blog page but you can also do this with a summary block. Universal filter is here (affilliate link...) https://www.bergendesign.co/universal-filter
  22. @kodrury sorry! Got bogged down with client work. I don't think this is doable with just CSS alone. Try this in your page header code injection for js. This takes the name of the category in the URL and turns it into the class for the page so you have something different about this vs the main page. SS doesn't seem to change anything we can use to style the category pages easily. <script> document.addEventListener("DOMContentLoaded", function() { var categoryURL = window.location.href; var index = categoryURL.lastIndexOf('/'); var categoryClass = categoryURL.substring(index + 1); categoryClass = categoryClass.split("?")[0].split("#")[0]; document.body.classList.add(categoryClass); }); </script> then for your sub pages do this but rename it based on your category names. For the /tex store it would be things like .health-leisure .kitchen .style .luxury .tech Any other type of character like the & will get removed and any spaces turned into "-" .categoryName #sections .page-section:first-child { .section-background { background-color: #000; //change to your color } } You also have one of the background effects turned on. I think you need to turn that off for this to work.
  23. Still says the site is private instead of password protected. Also your link when you share should end right after .com if we go to the /config part it’ll try to log us in as editors and no one here would have access.
  24. We'll need a link to your site and if it's still private set a site password so someone can take a look.
  • 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.