iamdavehart

I helped someone else on this. it's not really possible as the blog layout is not designed for that, unless you can keep the number of posts below the maximum on one page (20). so if you were careful and made sure to delete previous "events" to keep the number of upcoming low it might be possible to use the solutions / techniques in that post.

Just for educational purposes etc. but there's a good css trick where you can use general sibling selectors with a checkbox and you can get a nice CSS only expansion. Not completely honed this example, but you should see what I'm doing, chuck this into a code block. you could then modify styles and selectors accordingly. <div class="expandable-wrapper"> <input type="checkbox" checked id="expandchk" /> <label for="expandchk">...</label> <div class="expandable"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet mauris commodo quis imperdiet massa tincidunt. Mollis aliquam ut porttitor leo a diam sollicitudin. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Duis ut diam quam nulla porttitor. Tincidunt ornare massa eget egestas. Vestibulum morbi blandit cursus risus at ultrices mi. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Tortor aliquam nulla facilisi cras fermentum. Tempus urna et pharetra pharetra massa massa. Sagittis purus sit amet volutpat consequat mauris nunc. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Adipiscing elit duis tristique sollicitudin nibh sit amet. Amet justo donec enim diam vulputate ut. </p> <p> Arcu bibendum at varius vel pharetra vel turpis nunc. Duis ut diam quam nulla porttitor massa. Neque gravida in fermentum et sollicitudin ac orci. Diam quam nulla porttitor massa id neque. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Non consectetur a erat nam at. Ligula ullamcorper malesuada proin libero. Vulputate ut pharetra sit amet aliquam id. Volutpat sed cras ornare arcu. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. </p> </div> <style> div.expandable-wrapper { display:flex; flex-direction:column; } div.expandable-wrapper input[type="checkbox"] { display:none; order:999; } div.expandable-wrapper label { order:999; width:"100%"; text-align:center; background:#f1f1f1; } div.expandable { transition: ease-in-out 0.3s; overflow:hidden; } input[type=checkbox]:not(:checked)~label { opacity:0.5; background:white; } input[type=checkbox]:checked~label { opacity:1; } input[type=checkbox]:not(:checked)~div.expandable { max-height:100vmax; } input[type=checkbox]:checked~div.expandable { max-height:4rem; } </style> works like this you put your input at the top (because sibling selectors are relative to its location in the DOM model) you put your label at the bottom (you could do this in the dom, i've opted to flex the container and order it in css) you put your exandable stuff in a container element you then use the ~ general sibling selector and :checked pseudo selector which says if the expandable container is after a checked checkbox make it max-height of small, if I'm after an unchecked one make it max height of big... I've just chucked some transition in there to make it look nice, but you could do stuff like hide the label once its expanded etc.. if you didn't need a button to toggle the state, then a much simpler version could just use a hover to set the max height. <div class="expandable"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet mauris commodo quis imperdiet massa tincidunt. Mollis aliquam ut porttitor leo a diam sollicitudin. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Duis ut diam quam nulla porttitor. Tincidunt ornare massa eget egestas. Vestibulum morbi blandit cursus risus at ultrices mi. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Tortor aliquam nulla facilisi cras fermentum. Tempus urna et pharetra pharetra massa massa. Sagittis purus sit amet volutpat consequat mauris nunc. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Adipiscing elit duis tristique sollicitudin nibh sit amet. Amet justo donec enim diam vulputate ut. </p> <p> Arcu bibendum at varius vel pharetra vel turpis nunc. Duis ut diam quam nulla porttitor massa. Neque gravida in fermentum et sollicitudin ac orci. Diam quam nulla porttitor massa id neque. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Non consectetur a erat nam at. Ligula ullamcorper malesuada proin libero. Vulputate ut pharetra sit amet aliquam id. Volutpat sed cras ornare arcu. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. </p> </div> <style> div.expandable { transition: ease-in-out 0.3s; overflow:hidden; max-height:8rem; } div.expandable:hover { max-height:100vmax; } </style>

99% of the time blogs should be newest stuff first so it might not be but within Squarespace it probably is the best option. I guess it depends how many of these "articles" there are in each series. You could consider portfolios, but you don't really get the side-by-side layout or excerpts. What you do get though is a completely free reign on the layout of each project and can order the projects within each portfolio as you wish. If you did it like this you could just write up each section directly in the project page or you might also have an unlisted blog page that kept all the articles in and then use summary blocks to insert them into sections within the project page. So have a portfolio project for the TRS-80 repair, and then take people through it as a single story. big splashy headline, sections that take them through the concept and then use summary blocks to put the full blog articles in. if you wanted to break that story up into "acts" you could tag your blog posts and filter multiple summary blocks to show just the relevant tags. (note: summary blocks would still have new content first so you'd need some similar code to get those the right way round. bit more effort, but would make for very engaging pages that described your projects well.

First thing to know is that a CSS solution (or a client-side JS solution for that matter) can only affect elements that have already been loaded up. that means that you can only reverse the order of the first n posts which squarespace. (n is set in the blog page settings and can go up to a max of 20). if you're ok with that, then it's actually pretty easy. just make sure that the blog container you're using is set to flex and then reverse the flex direction. so in your case - as you're using side-by-side - just add this to your css. .blog-side-by-side-wrapper { display:flex; flex-direction:column-reverse; } remember though, if your page is set to show n articles and you add n+1 articles to your blog then you won't get the oldest post. you'll get the oldest post of the first n newest posts.... your pagination would also be a bit weird. PS. the first computer we ever had in our house was a TRS-80! ADDENDUM: Pagination on item pages I looked at your post and you want to swap the pagination links as well. A little trickier, as the next and previous are aligned and padded in specific ways with arrow icons. But you can do it. reverse the flex direction invert the padding flip the icons 100% horizontal prefix the css rules with this particular blog collection-id as you don't want to change other pagination in the site body.collection-642f14ee1e413265ff0d44f2 section#itemPagination { flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--next { margin-left: 0; margin-right: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--next .item-pagination-icon { padding-left: 0px; padding-right: 25px; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev .item-pagination-icon { padding-right: 0px; padding-left: 25px; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link svg { transform: scaleX(-100%); }

Hi. probably easier if you give the site url (and if necessary a password to access it). I think I know what you mean though. It's quite annoying but they use a different box sizing model for the blog page (side-by-side, grid etc) than they use for most other sections. what this really means is that the padding of the section is included when setting the maximum width in the blog sections where as in most other sections it is not, meaning you get an offset. you could fix this by changing the box-sizing model on the collection but that will probably have some adverse effects on the images, so I think the best way to do this is to change the max-width setting on your collection to expand to take into account the padding. this in itself has a couple of gotchas in that the max-width of your site is fixed in pixels but the padding is relative to the viewport size so you need to use a css calculation for this. the problem with that is that Squarespace's Custom CSS section doesn't really like calcs (because it's a LESS compiler not 'pure' css) so you have to do something a little odd to make sure it gets it right. what we're looking to do here is expand the max width of the collection wrapper to add on the "gutter" (the left and right padding). these two things are exposed as css variables so you should find that adding this will do what you want. (i've defaulted these variables to 1000px and 3vw, but they won't be used if your site has different settings). this also is set only to apply to blog-side-by-side but if you removed that ".blog-side-by-side" this would also fix the grid layout, or the portfolio layout for example which has the same problem. .page-section .collection-content-wrapper.blog-side-by-side { max-width:calc(~"var(--sqs-site-max-width,1000px) + calc(2 * var(--sqs-site-gutter,3vw))") } if that isn't what you mean then post the url and password and show us! you could of course, just use the code above remove all the calc stuff and fix the width yourself but you might find it changes as you resize the window... see here, the green is the padding and is included in the width calc (hitting the max-size of 1000px), note how the section lines up with the paragraph's text in the section above (even though that also has some padding - but the padding on that is ignored because it has a different box-sizing model as mentioned above) when you apply the calc, the padding is pushed beyond the size so that the content is what maxes out at 1000px (the actual wrapper ends up wider by the variable gutter size - 1077 at this viewport width)

there is a CSS way to do this: you can try this webkit property line-clamp. It's actually got really good coverage nowadays ("line-clamp" | Can I use... Support tables for HTML5, CSS3, etc) but not everyone likes prefixed css, but this will do the text-ellipsis thing too! if the odd random browser doesn't support it (i'm looking at you Opera Mini), it will just overflow. You could add a max height that calculated it based on the line height to try to catch that though. change the line-clamp to the number of lines you want. .blog-excerpt-wrapper p { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } if you want the fall back option too then work out what your line-height is. it's probably 1.8em, but you can check this in the dev tools. so if you want 3 lines you could add .blog-excerpt-wrapper p { max-height: 5.4em; /* this is 3 * 1.8em */ } I'd probably just add the first block and it'll overflow if the browser fails. making the max-height work with the webkit line clamp might produce some odd effects. Extra Credit work: you could of course combine this into a css calc with a variable which would also be lovely, but you should be aware that the custom css in squarespace doesn't love css calcs (FUN FACT: this is because it's not CSS, it's actually a LESS compiler), so you have to trick it a little by escaping the calculation (but escape it in a LESS way not a javascript way). so to have a nice version you could add this to your custom css. .blog-excerpt-wrapper p { --max-lines: 3; --line-height: 1.8em; overflow:hidden; text-overflow:ellipsis; max-height: calc(~"var(--max-lines) * var(--line-height)"); display:-webkit-box; -webkit-line-clamp: var(--max-lines); -webkit-box-orient: vertical; }

You can do this in a couple of ways. in both cases I assume you only want to do this on a blog, so you could either use post blog code injection (might be premium feature, can't remember) and add a style block with the css in, or you can find the collection id of your blog using the squarespaceid finder and modify the css selector for that. I'd recommend post blog code injection (click advanced on the settings of the blog you want to do this to) Simple CSS: (Fixed Height) Adding a css block that is coloured in a certain way and is of a fixed height is pretty easy. this has a fixed height of 500px; main article.sections section:nth-child(1) .section-border .section-background::before { content:''; background:lightblue; position:absolute; top:0; left:0; right:0; height:500px; display:block; } Complex / Obtuse(!) CSS: (Height that flexes with the title) the difficult part is if you want it to grow relative to your title block. in the picture for example you've got a 2-line title. a fixed width box isn't going to line up correctly. so for that option you have to try something more difficult. Essentially you have to find the element that has the blog header and do some css trickery to play with a box shadow. so, if you add this you should find that you get a light blue background that flexes with the size of the title/metadata holder main article.sections .blog-item-top-wrapper { background-color: lightblue; box-shadow: 0 0 0 100vmax lightblue; clip-path:inset(-100vh -100vw -100px -100vw); z-index:1; } to make this work in your style, you should change the "lightblue" in both places to the colour you want, and then change the third number "-100px" to whatever you want your padding to be (the space between the bottom of the title block and where the colour finishes. note that it is a negative number.

I had a quick look on the order status page of a few of my test orders and it doesn't do any injection of header code, custom css or any other point of extension as far as I can tell. so I guess the answer to your question is - sadly - no. Suggest you raise it as a feature (or hit the unhappy emoji when they ask you for your feedback on teh order status page in the commerce section of your website, as I just did! it prompts you for some suggestions)

@noahawaii ok, I've found your website now. (much easier if you post details of it with the question. also probably better to start a new post as this one has already been marked as a solution to something different). it's a bit different. this is down to Squarespace introducing fancy dividing sections and the css depends on how each section is set up. .page-section[data-section-theme="black"] .section-border, .page-section[data-section-theme="black"] .section-background { background-color: transparent !important; } also, if it's going to be transparent you don't need the "black" stuff. you might as well just put in the data section id you're dealing with... .page-section[data-section-id="622e5b8ddd586822ec87dd31"] .section-border, .page-section[data-section-id="622e5b8ddd586822ec87dd31"] .section-background { background-color: transparent !important; }

not necessarily. the other thing you could try is to stop the z-index transformation. I would caveat that by saying that this is - i think - a relatively new feature and so the code might change. Squarespace can of course change how the site is rendered at any time... might work though. add this to your css article section:nth-child(1).has-section-divider .section-border { transform: unset !important; } this will sort out the transition on the first section in the page. should be ok.

it's not to do with fluid engine. it's to do with squarespace recently putting in fancy dividers between sections. (you are using these in this site, but even if you don't use them the element structure has changed). The section-background element is now inside a section-border element rather than being a direct child of the main section element. the bug here is quite subtle though, normally a fixed section like this would be done relative to the viewport and therefore a new parent element shouldn't cause a problem here. However, in their implementation of the fancy borders, they use a css transformation to bring the section border to the front and these are processed at a different point by the browser. this CSS transformation on the z-axis actually negates your fixed positioning. the solution may not be immediately trivial, as it will depend on whether you want to keep your section borders or not. Turning them off may make a difference, moving your css rules to the border container may make a difference but you will need further rules to sort out your z-indices. I'd try turning off the section dividers first...

the section-background div is now wrapped in a section-divider div which also has the background color set. so if you want to see through the section then you'd need to set both of those to transparent. obviously this only works if you've set the theme of that section to "Darkest 1" which is interpreted as "black" in the attributes... .page-section[data-section-theme="black"] .section-divider, .page-section[data-section-theme="black"] .section-background { background-color: transparent !important; } I'm not entirely sure what you'd see though? you'd just see through to the site's background colour. maybe you've got some other code to stack sections on top of each other.

Hi @jvanhout. Your typekit link isn't being inserted to your page (I've checked the source). the rest of the code is all fine (I've tested by inserting the typekit link manually to your site). it probably works locally for you because you've got that font installed on your local machine... check the code that's inserting the link tag. that should be in your header injection (Advanced > Code Injection). like I said, I tried it on your site and it worked, so you've obviously not got the link tag injection working. Code injection is premium feature so perhaps its not supported for you? if that's the case, just add a code block into your footer and put the link tag in there. <link rel="stylesheet" href="https://use.typekit.net/zow1ant.css">

@watts-creative I was looking for something else to fix and saw you were looking for this sort of thing, so I'll add a couple of bits here for you to think about Do it with Code I know you said you'd prefer CSS, but newsflash is that it's easy in js and harder (but potentially not impossible) in css. Here's what I'd do: write a utility script that you stick in the footer injection of your site (or a code block in the footer) which creates the anchors and positions them at the top of each section. document.querySelectorAll("article>section").forEach(function(s) { const a = document.createElement("a"); a.setAttribute("id","section-link-"+s.getAttribute("data-section-id")); a.setAttribute("style", "position:absolute;top:0;left:0;z-index:-1'"); s.prepend(a); }) must be in the footer so that the sections are in the document when you run the script (or put it in the header as an event handler after the DOM content as loaded). Now you can just use standard links like #section-link-139408129035 to jump to each one. Add in the scroll-behavior:smooth thing referenced above to make it smooooooth. Do it with CSS (please don't! do it with code!) I strongly advise you only read on for educational purposes. this is tough. I'm mostly doing this for my own amusement and to try to understand the fluid engine implementation a bit better. OK, here's the deal. you can put your anchors in a fluid engine block, e.g. in a code block. you can also make them positioned absolute, but they will be positioned relatively to the first parent it finds that is positioned "relative". that doesn't get you very far. we've got a couple of options. break squarespaces positioning to let us go higher up the parent hierarchy (hacky AF!) set a negative margin on our absolutely positioned anchor to move it to the top of the section (difficult!) the assumption here is that you have a code block in your fluid engine which contains an anchor element that's been given a class of "jumplink". hacky AF version: /* this probably breaks some stuff! it gets turned off when editing */ body:not(.sqs-is-page-editing) div.content-wrapper, body:not(.sqs-is-page-editing) div[data-fluid-engine=true], body:not(.sqs-is-page-editing) .fluid-engine { position:unset !important; } /* unset your code block too! less worried about this */ body:not(.sqs-is-page-editing) .sqs-block-code { position:unset !important; } /* move your link to the top */ a.jumplink { position:absolute; top:0; } negative margin version: The issue here is probably what you've found already. the sections top padding and height moves around a lot as the browser changes its viewport size. This means that you've got to set your padding in relative terms, and with the same rules as Squarespace use to set section top-padding (23 of them...). You've also got to factor in that if your section's content is smaller than the minimum height of a section then you've got to use that instead. (and the first section is explictly padded again by the height of the header, which is tough to deal with, but maybe you'll let me off that bit as the first link doesn't matter so much and for that you can just use #top). So how the **** do we do that?! well we need to know the different paddings and minimum heights that SQS 7.1 use. I _think_ they are standardised, but either way you can check them in the site.css. they are all set using a combination of vh, vw and vmax settings. vmax is particularly interesting as it factors in orientation as well and returns the longer side of the viewport. Squarespace has separate rules depending on whether your section is padding S, M or L, and whether it is aligned top, middle or bottom. there are other rules for first section, manual sizing etc which I'm not going to deal with here, but you could. We find these values. it would have been super if Squarespace had these in variables cause then the rule would have been easier, but they aren't so you've got to copy all the rules and put the paddings and min-heights into variables at the section.content-wrapper level. you can then create css to set the top position to negative the padding. But wait!, if the section is too short you need to go to the top of the minimum height. well, to get there we need to know half the minimum height of the container and subtract half the height of the fluid engine block assuming it's vertically aligned in the middle. if it's aligned top we don't need to worry, if it's aligned bottom we need the minimum height of the container and subtract the height of the fluid engine block. Here we go... I'm only going to do the rules for a standard medium sized block, but I'll put in the different variables to take account of the three different vertical alignments. the other 20 rules you need are very similar if you really want to go down this route (HINT: don't go down this route! do it in code!) /* you still need to unset the position of the code block */ .sqs-block-code, .sqs-block-code .sqs-block-content { position:unset !important; } .page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--medium>.content-wrapper { --dh-min-height-factor:0.5; --dh-fe-height-factor:0.5; --dh-top-padding:6.6vmax; --dh-min-height: 66vh; } .page-section.vertical-alignment--top:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--medium>.content-wrapper { --dh-min-height-factor:0; --dh-fe-height-factor:0; --dh-top-padding:3vw; --dh-min-height: 66vh; } .page-section.vertical-alignment--bottom:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--medium>.content-wrapper { --dh-min-height-factor:1; --dh-fe-height-factor:1; --dh-top-padding: 13.2vmax; --dh-btm-padding: 3vw; --dh-min-height: 66vh; } now that I've put in my variables, I can create a css calc at the a.jumplink level and that will fill in the variables accordingly. interestingly, Squarespace's custom css is actually a sass precompiler and it doesn't like all the possible css functions, however, you can just put this in a code block, or the header injection: a.jumplink { position:absolute; display:block; top: calc(-1 * max( calc( var(--dh-min-height-factor) * var(--dh-min-height) - var(--dh-fe-height-factor) * calc(100% + var(--dh-btm-padding,0px)) ) , var(--dh-top-padding)) ) } so that's -1 to make the top padding negative either use the distance between the fe block height and the section min height (factored in for the different height factors for vertical alignment - adding in bottom padding when required) or use the top padding, whichever is larger If you got this far.... you might just have to take me on trust that it works.... it does, but you probably shouldn't do this. but I learned something and got to distract my brain for a bit...

@bonneedshelp OK, your code is wrong because you're trying to link to Adobe's provided stylesheet as if it were the font itself, which doesn't work. However, to get the macrons this is really a question about how to set up web projects on Adobe. First thing to do is to get your code right. you need to add a link element that links directly to the adobe stylesheet. best to do this in your header injection code if you're on premium. if you're not you can probably just inject a code block into your footer. <link rel="stylesheet" href="https://use.typekit.net/yfh4dir.css"> then you can add your css rules which will tell it to use the font. something like you've already tried will work here. put them into your Custom CSS, or embed them in style tags within a code block. note that the font-weights must match exported versions of the fonts. you'll be able to see what those are when you edit the font project in adobe (coming up...) p,h1,h2,h3,h4 { font-family:'alda' !important; font-weight:700; } this should make everything go all 'alda'... but the macrons will probably not go into the alda font. this is because of the problem I've written about in previous posts in this thread. Web fonts are made as small as possible and therefore don't export all the characters by default. To change this you'll need to go into your adobe account which is providing the font. go to https://fonts.adobe.com/my_fonts#web_projects-section and once you have signed in you'll need to edit the project's exported character sets. It will be set to default. at this point you can modify the character set, you can click "All Characters" or "Language Subsetting" and include specific character sets. probably better to do that in your case. You can also see here the different weights being exported... click "Save Changes" at the bottom. You'll have to wait a little while the font changes are propagated through adobe's content delivery network, but after a minute or two press refresh on your website and the macrons will appear.

OK, well you haven't provided much information here, but you do have some options. when you tag products in squarespace it creates a class on the main article element called tag-<yourtagnamehere>. this means that you can do something like this to add a label after your product title. article.tag-reserved h1.ProductItem-details-title::after { display:block; content:'reserved'; font-size:16px; padding:10px; background:grey; color:white; border-radius:5px; width:fit-content; line-height:100% } you can format it however you want by changing the css, but this should be enough to solve your problem.

@watts-creative ok, I'll answer because it is sort of interesting and I like interesting posts. The interesting thing is the implementation of fluid engine blocks, and what that means for css rules within it. No-one's got time for long explanations so I'll just put my favourite answer first, then I'll add more detail beneath it. Best answer (most elegant IMHO) In a fluid engine layout summary blocks are rendered even when they're empty. to achieve this, sqs have used container elements, but they do render an internal content wrapper tag, which is rendered empty (zero white-space) in an empty summary block. CSS let's you use the :empty pseudo selector to find this, and then (somewhat counter intuitively) lets you add content into it using ::before pseudo elements. so... you can do this .fe-block .sqs-block-summary-v2 .sqs-block-content:empty::before { display:block; position:absolute; top:0; bottom:0; left:0; right:0; text-align:center; content:'Nothing To See Here' } and now any summary block that's empty gets a nice message, sized the same as the original summary block Alternative Answer - Thinking 3D I think the real problem here is that the fluid engine layouts aren't that fluid. they're fixed and the elements are positioned. that means that to show a good "there's nothing here" message it needs to be placed in the same place as the summary block. but we do have a front-to-back ordering in a grid unlike a flow layout... So I genuinely thing that the answer here is to make your "nothing here" message as normal. just a text block or something. put it "underneath" your summary block by setting the z-order in squarespace (send to back). now you'll be able to see through it so what you want is to set your summary block (which is transparent by default) to have the same opaque colour as your background. you can use the colour or the css variable for the site background or section background or whatever. now when your summary block is full it will be put in front of your no-content message, and when it's empty you'll see your message. The interesting thing about this is that squarespace DO render the fluid block in the same size even if its empty, but they don't absolutely size the block contents container so this approach does work. This would therefore be useful if you wanted a complex text block for your message. e.g. with links etc. .fe-block .sqs-block-summary-v2 .sqs-block-content { background:white; } remember to make sure that your "nothing here" block is set behind the summary block in both desktop and mobile view. you'll have to do that explictly. Another approach I opted against: CSS Container Query You could also use a css container query (:has) which would be similar to the original answer, but I've opted not to do that. Container queries are awesome, but they're just a little too new and support is opt-in on firefox. the container query would allow us to find code blocks that were general siblings of a summary block and then show/hide the code block accordingly. There's a caveat here though, that the fluid blocks are absolutely positioned, but css sibling selectors don't work like that, so you'd have to make sure that the code block was added second and that's going to be hard to debug if you get it wrong... container queries are going to make a lot of really useful css editing possible. maybe not today in this case, but soon they'll be everywhere... Final Thoughts I'm not sure I'm a great fan of fluid engine layouts as default. Grid layouts can be great, but it seems to me that flow layouts are more useful (esp in responsive situations) so I really hope they don't get rid of the "classic" layout altogether (or at least give us a flow container block...) that was a very long answer. sorry.

a.eventitem-meta-address-maplink, a.eventlist-meta-address-maplink { display: none; } add this to your site css and it will be hidden on both the item and the list page. if you only want it removed from one of them just delete the other part of the rule (and the comma)

The caption / description in a 7.1 gallery section will accept some basic HTML tags, so you can just wrap the titles in italics tags <i>Spring Beauty</i>, 2022, Painted Aluminium, 51x48 inches

I don't know if it doesn't work because I don't actually use this on my site, I just read the instructions on linkedin to answer the question. I did test it at the time though and it was working. I suspect that the person who pointed out that the second "click" should be "track" was probably right, so I'd try that and see if it works. so the script inside the code block should be this <script> const btn = document.querySelector("form input[type=submit]"); if (btn && btn.addEventListener) { btn.addEventListener("click",function() { window.lintrk('track',{ conversion_id: xxxxxxx }); }); } </script> with the correct conversion_id subbed in

I suspect that the avatar you have for your profile isn't square, so when we set the img width and height directly it distorts the picture. to fix this you can either make sure that you set your images widths correctly, or probably more easily, set the object-fit properties then you should find it works .blog-item-author-profile-wrapper .author-avatar { width:100px; height:100px; } .blog-item-author-profile-wrapper .author-avatar img { width:100px !important; height:100px !important; object-fit: cover; object-position: center; }

OK, your custom fonts are fine, but the heading font for the products collection is defaulting back to squarespaces "proxima nova" font (which doesn't show the macron - this is similar to the point in the other question about macrons that I answered). So all we really need to do is make sure that we prioritise your font above others. so just add !important after your rule that sets h1 and h2 to your font. leave all the other code you've got the same but change the h1,h2 to h1, h2 {font-family: 'KAPRASEMIBOLD' !important } and you'll get your nice font on the product page

I answered a question about macrons the other day. One thing I've noticed is that not all the squarespace fonts are imported the same way. most of the google font ones have full stylesheets that import all unicode ranges (when required), but the typekit ones seem to be different subsets. I found that if you find the right font link in your source you can change the subset_id of fonts that are brought back to include the full set (which includes the macron). this was the question I answered. The answer will probably be dependent on the particular font (and the particular weight/style of that font) so post the password to your site and we can find the right rule, but the other question I answered may be useful for you.

ok, I looked up the fonts in your page source and they're slightly different, so if you add this code to that page it should work <style> @font-face{font-family:omnes-pro; src:url(https://use.typekit.net/af/0bc945/000000000000000077359c15/30/l?subset_id=1&fvd=n4&v=3) format("woff2"), url(https://use.typekit.net/af/0bc945/000000000000000077359c15/30/d?subset_id=1&fvd=n4&v=3) format("woff"), url(https://use.typekit.net/af/0bc945/000000000000000077359c15/30/a?subset_id=1&fvd=n4&v=3) format("opentype"); font-weight:400; font-style:normal; font-stretch:normal; font-display:auto; } </style>

the code I posted will only work if it's got the default styling on it, so it's possible that you have a different style, font-weight or something like that on it. Also, you might find that the typekit link is slightly different for you. (mentioned both of these in the notes - it's not a personalised solution as can't see your site) so, to be sure that you've got it right you'll need to know what size/font-weight you're targeting, and also to check the typekit link is correct for your chosen font. easiest way to do that is to inspect the elements using Chrome's developer tools and search the source for "omnes-pro". if you don't want to do that, then feel free to put the link to your site here (publish it behind a password if its not ready yet and put the password here) and I'll have a quick look for you.