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.

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.

@FarrellStrategicGroup YAY! So glad we were able to arrive at a solution. Best of luck with the rest of your site build!

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.

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.

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.

Hey! It may be published, but it's still set to private.

@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!

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!

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.

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!

@jpeter thank you! That worked well!

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!

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!

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.