7.1 Newsletter Block CSS Help - how to reduce size of email fill form and submit button

On 4/20/2020 at 6:57 AM, tuanphan said:

Add to Home > Design > Custom CSS

.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
button.newsletter-form-button.sqs-system-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

 

You are a Legend! Thanks so much!

As usual @tuanphan is a living breathing Squarespace God Human! Been helping me for years. In scrolling through this feed and seeing all the "Hey Tuan!!" Seriously. Dude needs a Buy Me A Coffee or tip jar page!

My site is not live (so I cant share), only a holder. I normally use SquareKicker but cannot afford that right now. I used your very first code adjustment which helped reduce the overall size a lot (which has been whack for years on Squarespace). That code is:

.sqs-block-newsletter .newsletter-form-field-element {

    padding-top: 10px !important;

    padding-bottom: 10px !important;

}

button.newsletter-form-button.sqs-system-button {

    padding-top: 10px !important;

    padding-bottom: 10px !important;

}

Please note the pic below. The red lines show that I want it to line up more with the copy above it. I will get back on Squarekicker, but I need a temporary fix to resolve this issue and get it closer by further reduce field height and width, field font size, and the the overall width. Any help would be appreciated, Tuan. Thanks as always. 

On 10/7/2023 at 11:45 PM, BobInAustin said:

As usual @tuanphan is a living breathing Squarespace God Human! Been helping me for years. In scrolling through this feed and seeing all the "Hey Tuan!!" Seriously. Dude needs a Buy Me A Coffee or tip jar page!

My site is not live (so I cant share), only a holder. I normally use SquareKicker but cannot afford that right now. I used your very first code adjustment which helped reduce the overall size a lot (which has been whack for years on Squarespace). That code is:

.sqs-block-newsletter .newsletter-form-field-element {

    padding-top: 10px !important;

    padding-bottom: 10px !important;

}

button.newsletter-form-button.sqs-system-button {

    padding-top: 10px !important;

    padding-bottom: 10px !important;

}

 

Please note the pic below. The red lines show that I want it to line up more with the copy above it. I will get back on Squarekicker, but I need a temporary fix to resolve this issue and get it closer by further reduce field height and width, field font size, and the the overall width. Any help would be appreciated, Tuan. Thanks as always. 

 

 

If you can share page url, we can help easier

If the site is trial/unpublished, you can follow this guide to share url

Hey @tuanphan - I got it sorted. Thanks, as always, for your support. 

@tuanphan I'm using the css you provided above to slim down the height of the newsletter input and button. Works great and it now looks like the image with the dark grey bg).

I'd like to be able to close the gap between the input and the button so it looks more like the image with the beige bg.

Appreciate your help!

On 11/9/2023 at 1:36 PM, jmerrill said:

@tuanphan I'm using the css you provided above to slim down the height of the newsletter input and button. Works great and it now looks like the image with the dark grey bg).

I'd like to be able to close the gap between the input and the button so it looks more like the image with the beige bg.

Appreciate your help!

Can you share link to page? I can check it again easier

@tuanphan Sorry for the delay. Yes, you can view the site (see footer) here:

URL: https://liftin.me/
PW: lifting

9 hours ago, jmerrill said:

@tuanphan Sorry for the delay. Yes, you can view the site (see footer) here:

URL: https://liftin.me/
PW: lifting

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.fe-block-yui_3_17_2_1_1699493431125_40935 {
    .newsletter-form-body {
        display: flex !important;
    }
    .newsletter-form-field-wrapper, .newsletter-form-button-wrapper {
        padding: 0 !important;
    }
    .newsletter-form-button {
        border-radius: 0 !important;
        height: 100% !important;
    }
    .newsletter-block .newsletter-form-field-wrapper {
        min-width: 1px !important;
    }
}

Thank you! @Web_Solutions 
This gives me the basics of what I'm looking for. I'd also like to achieve two things:

1. Have the newsletter (input and button) expand to the full width of the newsletter block. Right now it's fixed to a certain width no matter how far I expand the block. I'd like it to extend to the center of the screen.

2. Reduce the height of the input and button.

Thanks for your help.

Hi There,

I am trying to use the code above however its not working. Can someone point me in the right direction? 

On 3/15/2024 at 7:57 PM, praustralia said:

Hi There,

 

I am trying to use the code above however its not working. Can someone point me in the right direction? 

 

To add code to Code Block, you need to wrap code in style tag

<style>
  paste your current code here
</style>