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


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by Wolfsilon

  1. I'd add a negative value the top property for the "arrow" CSS
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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; }
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. Sam, Could you please provide the password to view your website so that we can take a look. -Dan
  13. 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.
  14. 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
  15. 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.
  16. 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.
  17. Yes. If you'd like help, please share a link to your website so that we can take a look.
  18. Hello, If you could share a link to your website with this navigation in question it would be easier for us to help you. With out seeing the code or issue in context, it will be too difficult to eye-ball it. Thanks, Dan
  19. section[data-section-id="61706cb56765230a8ca03d86"] { .page-section > .content-wrapper { max-width: 100%; padding-right: 0 !important; } } Without doing any other optimizations the quickest solution to get your image on the right of the screen is to just override the section default padding and max-width. You'll then need to use spacers or custom CSS to adjust the layout and sizing's if you want. If I remember correctly, you should be able to apply a spacer to the left of the section and between the text to bring it in a bit more like the original layout. IMO - this is the easiest way of doing something like this, otherwise you'll likely be doing all of the positioning yourself.
  20. If you're using absolute units like "px" to set your font size and overriding the Squarespace default sizing's, your font will likely always be the exact pixel amount that you set. H1 { font-family: "CUSTOM_FONT_FACE"; font-size: 54px; } Will always be 54px regardless of the size of the rest of your content or screen size. You'll likely want to set the maximum size of each of your custom text elements using an absolute unit and use relative units to scale appropriately. Ideally, you'd end up with unit that calculates the size dynamically. Otherwise, you'll need to use media queries to adjust the size for each possible screen size. Example setting a font size with an absolute unit and using relative units for responsive design could look like this: h1,h2,h3 { font-family: "MY_FONT"; font-size: 54px; } .myBlock h1 { font-size: 3rem; } .myBlock h2 { font-size: 1.5rem; } You can also use other methods to calculate the sizing/scale of elements using units or formulas like "calc()" or "vmin" or "vmax" and "vw" and "vh".
  21. I would try just overriding the entire section with a new min-height. You currently have a min-height of "33vh" for your section. Try the following code: section[data-section-id="6112b7573ddad372bbc103a1"] { min-height: 100% !important; } You can then also adjust your padding/margins if needed.
  22. Right. The mobile view through the browser inspector and the one that Squarespace provides from within the dashboard can be misleading. It will only display the actual screen dimensions and doesn't include the UI of the browser on mobile devices. If scrolling down to see the text is the only issue you're having, I would find the appropriate margins/padding for both Android and Apple devices and apply those measurements to your margin or padding bottom text block via CSS.
  23. In the code you shared, you're also targeting the gallery and setting the margin for "52px 135px..." That's probably why your masonry gallery is crammed together.
  24. Just a thought, perhaps changing it to "@media screen and (min-width: 747px) {....}" might help.
  25. Try this code: section[data-section-id="615dc3a559f87607cdbd5ede"], section[data-section-id="615dbc213cf61c03804eff48"] { @media only screen and (max-width: 640px) { .sqs-row { display: flex !important; flex-direction: column-reverse !important; } } }
  • Create New...