Help with CSS for Newsletter Block

Site URL: http://www.coindisplays.com

I am using the Brine template but cannot change the font size of the Newsletter Block.  I want to add the newsletter block to the footer.  Changing the size of the box and submit button.

Please assist.

Where is newsletter? Can you take screenshot?

Here is the screenshot.  First, I would like the title font of the newsletter to be much smaller.  If possible, I would like the SIGN UP to by inline with the input field.

Thanks,
Paul

Add to Home > Design > Custom CSS

footer.Footer h2.newsletter-form-header-title {
    font-size: 18px;
}
@media screen and (min-width:641px) {
footer.Footer .newsletter-form-body {
    display: flex;
    flex-direction: row !important;
}
}

Thank you for the quick reply, I made the change however the SIGN UP is not lined up.  Also, can the Sign up and save 5% be on one line and closer to the input box, not so much space?

Can the box and button be made smaller?

I was able to make it more how I want it.  See below.  I would like the SUBSCRIBE though to be closer to the input field.  If the field and the button can be made smaller, I would prefer that too.

23 hours ago, coindisplays said:

I was able to make it more how I want it.  See below.  I would like the SUBSCRIBE though to be closer to the input field.  If the field and the button can be made smaller, I would prefer that too.

 

Add to Home > Design > Custom CSS

.newsletter-form-body>div {
    margin-top: 0 !important;
}

Hi, I am looking to do the same thing, but having trouble formatting it. Here is what it currently looks like vs. what we are trying to accomplish (wireframe screenshot).

9 hours ago, sebradshaw88 said:

Hi, I am looking to do the same thing, but having trouble formatting it. Here is what it currently looks like vs. what we are trying to accomplish (wireframe screenshot).

 

 

Can you describe in detail?

On 3/27/2020 at 10:02 PM, tuanphan said:

Can you describe in detail?

I'm really just trying to shrink the newsletter block so that it fits nicely in the footer. Ideally the button sits right next to the text input box. The top image is what it is currently. The bottom is what we are trying to create.

15 hours ago, sebradshaw88 said:

I'm really just trying to shrink the newsletter block so that it fits nicely in the footer. Ideally the button sits right next to the text input box. The top image is what it is currently. The bottom is what we are trying to create.

got it, can you share link to your site?

Hi @tuanphan

https://piece-collectors.squarespace.com/

password: CACTUS

Brine Template

I have 2 Questions:

1. How can I add a newsletter block to the right hand side of the footer?

2. Can I change the business name on the right hand side of the footer to be a logo instead?

Thanks!

50 minutes ago, emily.klein said:

Hi @tuanphan

https://piece-collectors.squarespace.com/

password: CACTUS

Brine Template

I have 2 Questions:

1. How can I add a newsletter block to the right hand side of the footer?

2. Can I change the business name on the right hand side of the footer to be a logo instead?

Thanks!

1. You can't add newsletter block???

2. Where business name? Can you take a screenshot.

Hi @tuanphan

1. No. Maybe it's something glitchy with SS - as I can only see two columns instead of three. 

2. Screenshot attached

Thanks,

Emily

2 hours ago, emily.klein said:

Hi @tuanphan

1. No. Maybe it's something glitchy with SS - as I can only see two columns instead of three. 

2. Screenshot attached

Thanks,

Emily

Q1. Contact Squarespace Customer Care

Q2. Add to Home > Design > Custom CSS

.Footer-business-info>div:first-child {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/artboard-1-.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent !important;
}

Replace with logo url

9 hours ago, tuanphan said:

Q1. Contact Squarespace Customer Care

Q2. Add to Home > Design > Custom CSS

.Footer-business-info>div:first-child {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/artboard-1-.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent !important;
}

Replace with logo url

Great thanks @tuanphan 

That worked a treat!

One last question - is there a way to hide the business information but keep the logo?

13 hours ago, emily.klein said:

Great thanks @tuanphan 

That worked a treat!

 

One last question - is there a way to hide the business information but keep the lo

Add to Home > Design > Custom CSS

.Footer-business-info>*:not(:first-child) {
    display: none;
}

On 5/14/2020 at 8:43 AM, tuanphan said:

Add to Home > Design > Custom CSS

.Footer-business-info>*:not(:first-child) {
    display: none;
}

 

Thank you so much!

8 hours ago, RRNYC said:

Hello and thank you so much for this code, it was super helpful! I just have one question: I managed to decrease the font size for the "newsletter" header but not the button/button font itself. Can you please advise how to give it all a more delicate, smaller look? Thank you so much!

 

Can you share link to page in screenshot?

Thank you!

7 hours ago, RRNYC said:

@tuanphan reutnewyork.com

 

Had also wanted to remove the "quick view" feature on this page: https://reutnewyork.com/shop

 

Thank you!

Add to Home > design > Custom CSS

/* remove quick view */
.ProductList-quickViewButtonWrapper.sqs-product-quick-view-button-wrapper {
    display: none !important;
}
/* button font size */
.sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-button {
    font-size: 12px;
}

Thank you!

@tuanphan Hi, Just wondering if you know how to create a single line newsletter block in squarespace 7.1? I'm attaching a image below of the kind of newsletter I mean. I'd appreciate any help! 

3 hours ago, KimPaola said:

@tuanphan Hi, Just wondering if you know how to create a single line newsletter block in squarespace 7.1? I'm attaching a image below of the kind of newsletter I mean. I'd appreciate any help! 

Just did for a client. If you share link to your site, I can give the code.