Jump to content

Wolfsilon

Circle Member
  • Posts

    410
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by Wolfsilon

  1. You could try this, keep in mind, your code is using Javascript and changing the classlist names. So this could reset after a viewer has navigated away from your page and returned so be sure to test. Hopefully the css won't effect your code but something to get you in the right direction: .subnav .collection:nth-child(1) { display: none; }
  2. Are you able to move this code into the page specific "Advanced Code Injection" via the page settings menu instead of site-wide header/footer injection? If I'm understanding this correctly, you have several separate pages for each language in which case this might help solve your problem without writing new JS.
  3. Could you please provide the viewing password so that we can see the context and help you solve your problem.
  4. .header-nav-folder-content { display: grid; grid-template-columns: repeat(2,1fr); width: auto; grid-gap: 10px; grid-template-rows: repeat(2,100px); place-items: center; } .header-nav .header-nav-item--folder .header-nav-folder-content { min-width: unset !important; } a.header-nav-folder-title:hover + div, .header-nav-folder-content { left: 0% !important; transform: translatex(0%); } It's a little tricky to do this because you don't have all of the 6 categories and I haven't done any responsive-ness to this. I've built this grid to provide a code that would get you started. Also, now you'll want to find out how to upload a small image to each title, this could be a bit more tricky but hopefully this points you in the right direction.
  5. Hello, If you could attach a link to your website, we can see the context of how you want this to function and hopefully provide a solution. Thanks, Dan
  6. Hi, You should be able to do this if you're using a custom font family. Using Custom CSS, wrap your elements inside the collection ID for each page that you want to change. You can find the collection ID by using the Squarespace Block Identifier extension available on Chrome or Mozilla, if you haven't installed this already. For the URL that you shared, here's what the final code could look like. #collection-617848c233fecf2977e89692 { h1,h2,h3 { font-family: "CUSTOM_FONT_NAME_HERE" !important; } }
  7. If you're using 7.1 you could try a code like this: .page-section:before { content: ""; position: absolute; right: 5px; bottom: 0; background-image: url(PNG_URL_HERE); background-size: cover; background-repeat: no-repeat; background-position: center; width: 50px; height: 50px; z-index: 1; }
  8. This plugin is not compatible on mobile devices by default. However, options to pass new arguments for IOS and Android exist within the plugin. There are also specific workaround cases available on the projects Github where you can get a better idea on how you can apply a fix for this. The problem is that this code here has already been adapted to Squarespace and you might not find exactly what you're looking for online. I'd recommend maybe trying to use fixed positioning for the images as the fallback and make it seem like "static"-y feeling.
  9. I'd add a negative value the top property for the "arrow" CSS
  10. You'll want to find and add the vendor prefixes for your linear gradients to ensure that they render on mobile device browsers Typically something like this- "-webkit-linear-gradient-(transparent,black)" could help solve the problem.
  11. Could be on my end, something blocking the src but here's a screenshot. I don't really have an idea of what the font should look like so my apologies if it is looking how it's supposed to.
  12. This element error wouldn't be the sole cause to effect your overall SEO ranking. It would have already crawled your page and discovered the headers and titles. Each program is different in how it ranks your SEO though. According to my results, your biggest struggle seems to be more about loading times for scripts, images, and CSS. You can get a better idea about what's jamming you up using PageSpeed insights too.
  13. You could adjust your arrow positioning by editing the position of the arrow to a negative value. like - "-200%" or something. That's something within your animation code that you'll need to change.
  14. section[data-section-id="617705f2693a3a0bfb1abe17"] { .content-wrapper { padding-top: 0 !important; padding-bottom: 8vmax !important; } min-height: 100% !important; } I should've specified that it should be outside of the "}" for content-wrapper. Like the code above.
  15. Okay now, instead of using ".page-section" for you min-height. Apply the min-height to the section itself instead. section[data-section-id="617705f2693a3a0bfb1abe17"] { min-height: 100% !important; }
  16. The above font changes does not reflect the live version. From my end, the website is being entirely displayed in "Times" font. Did you remove the custom font while you're testing? To change the font text for the title only the CSS would be: .header-title-text a { font-family: "YOUR_FONT_HERE"; } "a" - is the name of the element that contains your text For the most part, when changing the font styles for elements it is important to be as specific as you can with targeting the correct selectors.
  17. section[data-section-id="617705f2693a3a0bfb1abe17"] { .content-wrapper { padding-top: 0 !important; padding-bottom: 8vmax !important; } .page-section { min-height: 100% !important; } } Let's try breaking down the code then. Try this.
  18. In that case: section[data-section-id="617705f2693a3a0bfb1abe17"] { min-height: 100%; .page-section > .content-wrapper { padding-top: 0 !important; padding-bottom: 10vmax !important; } } You should then try and change the positioning by adjusting the padding-top or padding-bottom values.
  19. Hello, You can do this is you take the code you currently have and remove it from it's own section. Then add the code block to the hero section above (black section) and position the element at the bottom of the section. The animation will now play at the bottom of the black section, just before the gray section begins. It will be easier for you to position the element between the two sections if it isn't in its own section, because each section by default has a preset amount of padding, heights, margins,..etc.
  20. Sam, Could you please provide the password to view your website so that we can take a look. -Dan
  21. Hi, Does this authorization only apply to the client you're working with? Is the app intended will it be handling requests from consumers on Squarespace as well? I'd probably try and handle resolving requests externally, server-side, and then serve your response to the destination where the request was made. If I understand this correctly, it would be on Squarespace so you could do this via an embed or iframe is something.
  22. Hi, I am also following this thread to help you once you're able to provide a link to your website. The user above me is way beyond my expertise but I'll help if I can. -Dan
  23. Hello, So, the difference in your case vs. the original question is that Jess is using the gallery slideshow block and has each photo already placed into the 'slideshow'. From the looks of it, you're using a list slideshow which operates completely differently and I'm not seeing a second image uploaded into the second slide slot. What are you trying to achieve? In the original post, we were attempting to maintain, or replace an image for each of the "slides" on mobile devices.
  24. I was confused at first because cause it looked like you had already figured it out. But, I'm assuming the site you shared is the example. If you want the pop-up type function, you'll likely want to use a plugin. I think that SQSMODS has a well-priced solution. Otherwise, you'll likely want to code it yourself. Both options will require a Squarespace plan of Business or higher to support JavaScript customization.
  25. Yes. If you'd like help, please share a link to your website so that we 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.