christyprice

Your best bet would be the Universal Filter plugin: https://www.squarewebsites.org/products/universal-filter

@justinpheap.co I use one Home index page. Within that index I have one subpage for desktop view and one subpage for mobile that I show/hide with the code above. 

@justinpheap.co, I use index pages and just hide/show the subpages, so the page URL stays the same. 

@Chira, that looks fantastic! Great job and so glad I could help. ☺️

You could use this code when targeting your specific button class in Custom CSS - just change out the colors: https://codepen.io/miraviolet/pen/ZobWEg

@lindseyturner, exactly. You can use the Chrome extension Squarespace Collection/Block Identifier that JonJonJon mentioned above to easily discover and copy the block-id. Then you can change the font size from 20 to whatever works for you.

@JonJonJon that's the extension I use and recommend. 

You'd want to target that specific block for mobile only  in Design > Custom CSS. Try this and play around with the font size.

@media screen and (max-width: 640px) {
#block-b804c57f124fbfbe2d7f {
	font-size: 20px !important;
	}
}

To do that, you'll need to recreate the entire line of social media icons as a code block using FontAwesome.

You'll include the Font Awesome code in your site code injection as detailed in this post, then in a code block add the code for the icons and links, something like this:

<div><a href="mailto:youremailaddress" target="_blank">
<span class="fa fa-envelope"></span></a> <a href="https://yourlink.com" target="_blank">
<span class="fa fa-globe"></span></a>
</div> 

I second what @BigJosh says. Also, make sure you've connected your Squarespace site in Mailchimp and added that code to Squarespace. You can find the exact steps here. 

Sure. For the font color, weight, etc. you can just add those lines in with the code above, so something like this:

.sqs-gallery-block-slideshow .meta .meta-title, .sqs-gallery-block-slideshow .meta .meta-description {
  text-align: center;
  font-size: 30px;
  color: #000000;
  font-weight: 700;
}

Changing the font, you'd add in a line for font-family: new-font;
You'd just want to make sure that font is actually loaded on the site.
 

For the opacity, this adjusts the starting opacity at the bottom to 70%:], but you can play around with the colors and percentages. There's different code for the different rendering engines (-ms is for Internet Explorer, etc.):

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta {
    background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(30,30,30,.7)));
    background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%);
    background: -o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%);
    background: -ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(30,30,30,.7) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(30,30,30,.37) 100%);
}

Hi @natejmedia, 

Try adding this code to Design > Custom CSS:

.sqs-gallery-block-slideshow .meta .meta-title, .sqs-gallery-block-slideshow .meta .meta-description {
  text-align: center;
}

This isn’t the unicorn you’re looking for (you have to pay a fee for >25 entries, etc) but it might be worth checking out.

community box

ETA: If you are on the newer Squarespace 7.1, this post has a walkthrough: How to Show a Different Banner Image on Mobile in Squarespace

Hi @Joeyearthly,

If you are using an index page, I have a different workaround that I like a bit better, since you can make whole area specific for mobile instead of just the banner image. I create two "sub-pages" at the top of the index page, one for desktop view (with the URL slug home-banner) and one for mobile view (with the URL slug home-banner-mobile). Then I add the following code to Custom CSS. (Note that if you want to edit the mobile from your desktop, you'll need to briefly comment out the code so you can see that page on desktop.)

/* show home page block dependent on screen size */ 
@media only screen and (max-width: 780px) { #home-banner { display: none; } } 
@media only screen and (min-width: 781px) { #home-banner-mobile { display: none; } }

Hey @Valentino - I sent you a DM. It's a weird error, so I'm curious!

Thanks @Valentino. I can definitely see the error! When you edit the page, what do you see in that area? Is it trying to pull in part of a page?

The lazy summaries plugin is a third party solution that allows for you to sort the posts in several ways, including oldest to newest. https://www.squarewebsites.org/products/lazy-summaries

Could you both please post links to your sites? That would help us troubleshoot.

Thanks for the link. I had assumed you were using the Project blocks in Avenue and wanting to change those titles. For the way you have it set up, using a gallery grid, you'd need to use code like this, added to Design > Custom CSS: 

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
    font-family: futura-pt !important;
    font-size: 20px !important;
    line-height: 1.2em !important;
    text-transform: none !important;
    letter-spacing: .02em !important;
     font-weight: 300 !important;
    font-style: normal !important;
    color: #404040 !important;
}

You'll need to change out the values to match your H3. Since I didn't see it used on your site, I can't see what values you are using, so just replace the sizes and colors with whatever you want.

Hi @cakalak,

You'd add something like this to Design > Custom CSS. Delete the lines you don't need, and change the font-family, font-size, etc to match your H3.

.project .project-title {
    font-family: "futura-pt" !important;
    font-size: 20px !important;
    line-height: 1.2em !important;
    text-transform: lowercase !important;
    letter-spacing: .02em !important;
     font-weight: 300 !important;
    font-style: normal !important;
    color: #404040 !important;
}

I'm afraid I don't have any ideas, as I haven't come across this particular error before. I'd love to know what Support says, though. Could you post their response here in case someone else runs into this issue?

Hi @dylanmaustin, that sounds frustrating! Does Campaigns allow you to move forward with the email import? If so, Squarespace will automatically clean your list after your first email blast, removing any emails that bounce. If Campaigns is not allowing you to import the emails, you should reach out directly to support and they can help you further.  

You're right, the only way to do this is in Squarespace Campaigns is manually. I've run into the same issue and contacted support. You can't move someone from one list to another, you have to delete from the old list and add to the new list.

@kellycheerup  glad it worked for you! Also, if you could like my posts (the heart button in the lower right), it shows that I was helpful. 🙂

I can get you started on the font color... this should change the color for the links and the folder... maybe someone else can jump in with the button code.
 

/* change nav color on blog post pages */
.collection-type-blog #headerNav a {
color: #990000 !important;  }

 #mainNavigation .folder-toggle {
color: #990000 !important;
}

Try this... it works on my demo site:

/* invert logo on blog post pages */
.collection-type-blog #logoImage {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }

/* invert nav on blog post pages */
.collection-type-blog #mainNavigation {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }