CSS Expert AMA: Becca Harpain

Are you ready to take your website design to the next level? Do you have any burning questions about using CSS on Squarespace? We are excited to announce Becca Harpain (@inside_the_square), a seasoned expert in leveraging the full potential of CSS on the Squarespace platform, will be answering your biggest questions about CSS.

Why CSS on Squarespace matters

While Squarespace provides an intuitive and user-friendly interface for creating stunning websites, understanding and harnessing the power of CSS can elevate your design game even further. CSS is a versatile language that allows you to customize the look and feel of your Squarespace site beyond the standard templates.

Whether you're a seasoned web designer or a Squarespace novice, this AMA session with Becca Harpain promises to be an invaluable opportunity to gain insights into using CSS effectively, troubleshoot common issues, and discover tips and tricks to make your website uniquely yours.

Who is Becca Harpain?

A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.

How to participate

Please reply to this topic with any questions you have by Monday January 15th! If you see any questions you want to see answered, simply like the question. Becca will answer the top 10 most liked questions.

Hello, I am trying to edit the limited availability feature. I want it to show a custom message(which is currently possible), but I want the custom message to be linked to my inventory. Essentially, I want it to show " X Number of Orders Until Item is Unlocked", and this would update in real time as people place pre orders. Do you know how I could do this/if it is possible? I think a code injection would be necessary 

Hello- a full screen landscape gallery block is the first thing a user sees upon landing on my website. The orientation and screen extents look good on desktop but not so much on mobile where the landscape image is cropped to a portrait format. Is it possible, using custom code, to create an alternate. - or sub - portrait gallery that specifically shows on mobile? So what I am asking is: can a gallery block be split in two - with certain landscape images designated to display on desktop only and portrait images designated to only display on mobile?

Hello. 

How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 

Is there some kind of custom CSS I can include

Please let me know

Hi Becca! All of these questions are for a Bedford 7.0 site.

1) I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members )

2) I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?

3) I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?

Thanks so much for any and all help!

Hi Becca,

Do you have any ways to format the box when embedding an iframe? I'm trying to embed something small, but the embed box is way too big and I can't reduce it

8 hours ago, gingerbear said:

Do you have any ways to format the box when embedding an iframe? I'm trying to embed something small, but the embed box is way too big and I can't reduce it

The answer you're looking for is here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_iframe_169

@GeothermalCanada, thanks but I tried to put this in and it didn't make it better. (50/50 I did it wrong 😅) Can I send you a link for you to look at?

36 minutes ago, gingerbear said:

@GeothermalCanada, thanks but I tried to put this in and it didn't make it better. (50/50 I did it wrong 😅) Can I send you a link for you to look at?

Sure. You don't just copy and paste the entire thing though. Put this in your site custom CSS page: 

.container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

And put this code into a code block on your site page where you want to put the video:

<div class="container"> 
  <iframe class="responsive-iframe" src="VIDEO EMBED URL HERE"></iframe>
</div>

ofc you'll put the video embed url where it says to. I think it also works for items other than youtube videos but I'm not sure.

Thanks @GeothermalCanada, I'll give it a shot. But I'm not putting in a video, I'm putting in a value from a google sheet into a table

Quote

2) I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?

No need to answer. I've figured this one out using the following code:

#siteWrapper {
    background-color: transparent;
    background-image: url(IMAGE URL HERE);
}
#page {background-color: rgba(255,255,255,1);
  mix-blend-mode: normal;}

Another question! I know it's past the deadline but I'll try asking anyway. When you have two images and one of them overlaps the other, and both images have a drop shadow, how do you code it so that neither drop shadow overlaps the other image?

If you'd like to see an example of what I mean: https://www.geothermalcanada.org/ See how the banner shadow is on top of the white area? I'd prefer it not be. But if I boost the z-index of #page, it causes the shadow of the white page to show on top of the banner (that's not good either).

GeothermalCanada 

Quote

3) I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?

I am doing something like what you want now. I use a pull-down menu of blogs by subject, you click on any one and all posts show up with that subject in a summary block. I did not use code to create this. However I am hiding the category in each post with code and I changed the design of my summary block items with code, which was written by Becca and added to some of my code. You can see it here: 

my random views

Just click on the blog button and then pick a subject from the menu if you wish.

That's excellent! Very close to what I am looking to do. However, the page refreshes and hops to a different URL each time you select a category. I was hoping to avoid the page refreshing/hopping if that's possible. Also, I'm on Bedford 7.0 and reluctant to jump to 7.1 as we have a very large amount of content (hundreds of blog posts and around 100 pages) and it's imperative that nothing breaks or gets lost in the transfer. So I don't know if what you have is possible in 7.0 without some major custom coding (possibly Javascript, etc). Honestly I'd be happy if I could just get a grid view (like you have) instead of a list view (which is what we currently get on our site).

My site is Avenue also a 7.0 site. You can build the grid view. What you see with my blog is a combo of two blog pages working together. You don't have to do that. A normal page with summary blocks each with as many as thirty posts can be chained together on one page.

 My actual posts are in one blog in the unlinked section of my site and I have summary blocks in the second blog which is my front-facing blog. The menu pulls from the second blog using categories and the page refreshing is unavoidable due to the fact a category creates a new URL that acts like its own page.

If you don't want the page to be refreshed, then create a blank page, and put your summary blocks there. Each block will filter your blog by a separate category. Use an accordion block at the top of the page and in the block are anchor links, each link is connected to its summary block, and when clicked on will jump down the page to that block. 

As asked about someone reading a blog, clicking on a category, and then a summary block appearing with all the posts in the category, you can do that with a link to the block in the post, but the page will refresh, not any way that I know of to get around that without the summary block being in the post itself, but you would have to duplicate that for all the posts in that category. 

Becca may have a better way to do this. 

CSS for PHOTOGRAPHER AND ARTISTS when it comes to gallery options and displaying meta data

There are several bugs in each of every element not listening the need of artists.
Photos are cropped or just certain aspect ratios. So you can just have a gallery with horizontal or a gallery with vertical images.
Some display Title, some description, Some both, Stacked doesn t have a Lightbox.
Some import meta data. Some ways importing DON T.
What made Squarespace great for artists back in the days is MISSING in so many ways.

So i really appreciate if there ll be at least a view CSS options to make some ISSUES better. 🙂
Would be really amazing if you can help Becca.

If you re so kind to get code out for

1-GALLERY SECTION masonry
Lightbox display the description BELOW IMAGE on hover and permanent and how to change style or font

2-GALLERY BLOCK in blogpost
Lightbox display the description BELOW IMAGE on hover and permanent and how to change style or font

3-A code to make vertical images NEVER be bigger then the screen height on desktop.

Would help SO MUCH. I don t know if nobody is thinkiing about desktop view anymore.
Seems that its a common issue on all the platforms out there. Its not nice not being able to see an artwok fully on desktop.

There is really a lot missing in the 7.1 update and i m wondering how SS got Magnum photographers on board not having a prefect presentation for their images. BUt i assume that was a lot of Jqueries and code for them to run their sites properly.

PLEASE make SS great again for ARTISTS



 

@derricksrandomviews Here's how my blog looks after adding a sidebar using code. The grid layout hasn't been implemented yet as I'm still working on that, but the sidebar with accordion really helps with the navigation! There's just one problem I'm having though. The cloud tag I use to link to authors, opens the author's works directly in the sidebar instead of the page itself! How do I fix this problem? I really would like to avoid forcing new window opens if it's possible to avoid it. Here's the blog: https://www.geothermalcanada.org/catalogue/category/Geothermal Canada Content

Basically the search by author feature is a window that opens another page site that has only the tag cloud on it and nothing else. But I want a click to result in the author's works to be listed on the page itself, not in the sidebar.

Here's the code I used to embed the tag cloud:

<iframe src="/authortags" width="100%" height="500px"></iframe>

Any better way of doing this? Any help would be tremendously appreciated!!! 🙏

Edit: I've removed the iframe code as it was slowing down my site too much. Will need to find another way to embed the tag cloud!

I think that if you assigned authors to your posts as a  category, you can link that cat to your accordion file as a menu item.  Each author would be a separate cat of course and open on the same page if your link editor open in new window toggle is off. 

On 1/22/2024 at 2:53 PM, derricksrandomviews said:

I think that if you assigned authors to your posts as a  category, you can link that cat to your accordion file as a menu item.  Each author would be a separate cat of course and open on the same page if your link editor open in new window toggle is off. 

As mentioned it was an iframe embed, meaning an entire other webpage opened within the sidebar. The result of this was that a clicked link would open yet another whole webpage within that same sidebar pane - though I wanted it to open in the larger page not the sidebar. This is why I can't use iframe as a solution here. Another solution is needed. For now I did a mass copy-&-paste of all the links, but it's a lousy solution that I'm only using temporarily. Hoping to find a better way soon!

On 1/14/2024 at 11:35 PM, GeothermalCanada said:

1) I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members )

Solution found! I finally figured out a way to make gallery slideshow blocks work much better than before. Here's the CSS that makes the difference; copy and paste this into your page code header (or site CSS page without the style tags):

<style>
  .sqs-gallery.sqs-gallery-design-stacked {
  height: 478px !important;
  max-height: 50vw !important;
  }
  .thumb-image.loaded {
  width: 100% !important;
  max-width: 956px !important;
  left: 0px !important;
  object-fit: contain !important;
  }
</style>

And of course you can play around with the values to suit your needs and specific situation. Hope this helps some people.

Quote

3) I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?

Thanks so much for any and all help!

Found a quasi-solution using derrick's example. Navigation sidebar combined with summary blocks within a blog provides, for the most part, the functionality needed. Still hoping for a better solution though! Automatically-generating summary blocks right on the spot in response to user input, would be exquisite.

Hello, Becca.

I have a question about the look of my website. Desktop photos look great, but on mobile they are cropped, not full size. I added a css code ( I will share it below)  that worked for the Homepage photos view on mobile view in vertical position, but when I rotate the phone to horizontal position the photos are cropped again (not full size) and there are large gaps between photos and text. I would like you to help me if you can. I will be extremely grateful! I am attaching a link to the website and a short video shot by my mobile phone.