Jump to content

BartelsCreativeCo

Circle Member
 View Profile  See their activity

  • Posts

    28

  • Joined

  • Last visited

 Content Type 

Everything posted by BartelsCreativeCo

  1. BartelsCreativeCo
    Glad that worked! .fe-659205ad15f7844d8dbb253b is the class for this particular section. "fe" stands for fluid engine. You'll need to be able to use the browser inspector to find this for each section you're applying code to. grid-template-rows: repeat(18 ,minmax(24px, auto)) I believe the "18" determines the minimum number of cell rows in a section, while the 24px determines the minimum width of each cell. You shouldn't need to adjust the minmax(24px, auto) numbers, just the number of rows. I'd just play around with the row count at that media query breakpoint to determine what looks best for you in each situation.
  2. BartelsCreativeCo
    Great! Once you update, you'll be able to create a blog page and then change the style under the section settings. See screenshots below. As you'll see there are way more options for blog organization.
  3. BartelsCreativeCo
    @FarrellStrategicGroup YAY! So glad we were able to arrive at a solution. Best of luck with the rest of your site build!
  4. BartelsCreativeCo
    Maybe that's having something to do with it, but since the issue doesn't appear to be affecting every page, I think there has to be some code in effect on only the home page. Was there anything on the home page specifically, when you open up the settings gear icon and go to advanced? Idk if it'd be a script adding that. Feels like it's HTML somewhere because it's placing the "5" between the body tags. I don't know of a way to target that "5" is CSS because of the way it's nested between divs. To my knowledge, there is no specific class or id that relates to that text. Are you also noticing a messed up right margin when you scale the page size down? In my browser when I scale the page down, it increases the margin—you may have to side scroll to the right to see it. Sorry I can't be of more help right now. I'm puzzled as to how that got added.
  5. BartelsCreativeCo
    Ok I understand your dilemma now. You need to write a media query for this to adjust the margin for the specific screen width range. Since it looks fine on desktop and mobile, but incorrect on Surface Duo I'd suggest trying this in your custom CSS @media only screen and (min-width: 380px) and (max-width: 767px) { .fe-659205ad15f7844d8dbb253b { grid-template-rows: repeat(18 ,minmax(24px, auto)) !important; } } This should lower height. Please let me know if it works.
  6. BartelsCreativeCo
    No problem! So after inspecting this in the browser, it looks like you have that space at the top because the number "5" has been added to the html. When I delete that from the chrome inspection tool the gap at the top disappears. The issue I'm having is finding exactly what the "5" is assigned too. When I inspect the page it isn't tied to one specific id or class—rather it's just in the "body". This doesn't necessarily solve the problem, but you can hide this by adjusting the top margin. It'll just move it up so that it is no longer viewable. You can use this while you look for the solution to remove the unwanted "5". #collection-628fe0495bd5536790a9266c body { margin-top: -20px !important; } Given the amount of code injection on this site, I'd bet that the "5" was added to the html via a Header code injection and not through CSS. It appears the issue is only on the Homepage, so check the various sections code injections to see if you can find the culprit. Likewise, check the sitewide Code Injection portal to see if there is anything that may be injecting the "5" into the HTML. Hope this is helpful! Let me know what you find out.
  7. BartelsCreativeCo
    Hey! It may be published, but it's still set to private.
  8. BartelsCreativeCo
    @FarrellStrategicGroup Thanks for sharing the code snippets. Can you share your site url and password (if applicable)? It'd be beneficial to be able to inspect the code from my browser. Thanks!
  9. BartelsCreativeCo
    Oh my bad, you're working in 7.0 and not 7.1. "Masonry" isn't a theme, it's a layout option in 7.1 for blog pages. For 7.0 you are generally limited to a Grid layouts (which you are using) or a List layout. I'm sure you can correct this with css, but I'm unaware how; however, you can imitate this via a use of Index pages and summary blocks. So essentially you're moving your actual "Blog" collection page to the unlinked section so it doesn't appear in navigation. Then you will create a new page/index page in the linked section which will appear in navigation. On this page you will ad a Summary block that you assign to your Blog Collection content. Summary Blocks allow for a lot more design flexibility. Rather than type out everything here, I've found a video tutorial that explains how to set this up: The video doesn't show you how to style content in the manner you're looking for, but if it's important for you to have staggered posts, then this is a good step since the Summary Block should allow you to use a Masonry layout. Once you've implemented that, I or the forum community can advise on code to create the drop shadows and rounded corners. Hope this helps!
  10. BartelsCreativeCo
    Thanks for the clarification. I personally don't see the issues you're describing on the About Page. Here is a screen shot of my desktop view in Chrome browser. If anything the text is too close to the footer and could use a little extra space, imo. Here is what it looks like when previewing on the iPhone 12 viewer via Chrome's inspection tool. Again, I do not see the spacial issues. Have you previewed in your actual browser as I am? Perhaps it's only occurring in the editor and the spacing is fine in context. All that said, if you're not seeing key editing features such as section height adjustments, you should reach out to Squarespace's support team to see if there is a bug and they'll inspect your site.
  11. BartelsCreativeCo
    Hey there! I just checked your site and it looks like you are now utilizing a gallery reel section with an autoscroll effect—I do not see any arrows either so that's another item off your list 👍. This is one way of solving your auto scroll logo gallery, but the downside is the images become very large and they crop poorly on mobile to where you don't see the full image. So, I recommend making sure your section Height settings are as low as they can go and that cropping is turned OFF—see screen shot. This should help with how the logos display, especially on mobile, and make for a more pleasant user experience. Please let me know if this is helpful!
  12. BartelsCreativeCo
    @jpeter thank you! That worked well!
  13. BartelsCreativeCo
    Interesting that there doesn't appear to be the section height controls when you open the editor. When I view your site, and inspect in BOTH Desktop and Mobile view, there is a large margin between the social media icons and the rest of the footer. So, the margin issue in my user experience appears in both views—I've attached some screen shots showing the fluid grid cells that appear between your social block and the footer. If you're not seeing key editing features as pictured in my screenshots from the previous post, you should reach out to Squarespace's support team to see if there is a bug. Otherwise, if you want to have a quick fix try injecting this into your custom CSS editor. You can play around with the Height property to fit your liking. /*targets the section that is too tall*/ .fe-657f99a1fb33212489601806 { height: 100px !important; /*adjust pixel value to your liking*/ } Let me know if this helps!
  14. BartelsCreativeCo
    Hey there! I'm not sure I understand what you mean by "changing the theme". Do you mean have the code I provided only work on that blog summary page? Can you please elaborate? Thanks!
  15. BartelsCreativeCo
    That's a bummer to hear! I'm curious though. When you said you duplicated the CSS, do you mean you had one set of css properties set to target just the safari browser using special webkit properties? For instance like this? /* Safari 11+ */ @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) and (stroke-color:transparent) { header-nav .header-nav-item--folder .header-nav-folder-content { top: 36px ; } }} Alternatively you could try this approach using round pixels too. @media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari only override */ ::i-block-chrome,.header-nav .header-nav-item--folder .header-nav-folder-content { top: 36px ; } } Let me know if this is helpful! There is likely some js out there that can help, but that's beyond my expertise.
  16. BartelsCreativeCo
    @jpeter that worked great for adding the labels, thank you! I apparently still need to add an "Aria-required" designation though. Would you be able to show me how that factors into the code?
  17. BartelsCreativeCo
    Hey there! The vimeo link isn't accessible for me. Could you repost?
  18. BartelsCreativeCo
    Hey there! Assuming you are using the latest version of Squarespace 7.1 with fluid engine, you should be able to adjust the height and padding of each section. I've attached screenshots for context. Click "Edit Section" then go down to adjust the height. You can customize the "Gap" spacing as well and play with "Row Counts". Also double check that the bounding box of your content is adjusted appropriately so that you can use the section height sections. You will need to make these adjustments in both Desktop and Mobile view editors Let me know if this helps!
  19. BartelsCreativeCo
    Hey there! I ran into this issue a while ago and found that the free plugin from Will Myers works well. He has a great tutorial with code here: https://www.will-myers.com/articles/clickable-folders-for-squarespace-71
  20. BartelsCreativeCo
    @CryptologistTM Awesome!
  21. BartelsCreativeCo
    Hey there! First make sure your blog style is set to Masonry—if you're using images, make sure their position is set to be at the top. Then adjust your spacing between objects using the tools in the blog summary editor. Next add this code: .summary-item { /* Creates space around the content */ padding: 15px; /* Makes rounded corners */ border-radius: 10px; /* Adds a black drop-shadow at 20% opacity-adjust values to your liking */ box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.2); } Let me know if this gets you closer to where you want to be! Best, Logan
  22. BartelsCreativeCo
    Hey there! I think the issue is that you're using fractional pixels ie "35.5px". To my knowledge, Safari doesn't respect fractional pixels. Try rounding to a whole pixel value and let me know how it goes! best, Logan
  23. BartelsCreativeCo
    Hey there! To my knowledge there isn't a built-in way to adjust the summary styling. I recently had to adjust summary titles as well. Try this: .summary-title { font-family:var(--heading-font-font-family) !important; }
  24. BartelsCreativeCo
    Hello, I'm looking for a solution to make the Newsletter Block sign-up form more accessible to meet ADA compliance. I keep getting flagged when I run it through an accessibility scanner. I've attached a screenshot from the audit for context. Right now the default newsletter blocks don't allow for official form field labelling, but rather show the form field description as placeholder text. Unfortunately, placeholder text isn't read by screen readers and therefore doesn't meet accessibility compliance. I'm looking for a javascript solution that would allow me to add currently non-existent "aria-labels" to those form fields. I have found some options for this but they require the HTML to have the aria-label attributes in place—which this newsletter block does not. Does anyone have a solution?
  25. BartelsCreativeCo
    Hi @Nikky! If you're referring to the "Featured Clients" section with the logos near the bottom of your home page, I'd try a different approach. Right now, it looks like you have each logo as an individual image block which won't allow you to have scrolling features. I'd recommend using a gallery block with the carousel layout. You can expand the block full-width if desired and chose "automatically transition between slides". Alternatively, you can use a section layout and choose Carousel. The downside to that is there is no "auto transition" feature built in so you'd have to use a plugin to create the auto-play effect. Hope that helps!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources