Jump to content

Replace Newsletter enter e-mail box with just a Line

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.afsanaparis.com

Hello,

I'm trying to improve the newsletter on my website.

I want to replace that box where a person would enter their email with just a thick line.

I tried one plugin but it just gives a terrible result on mobile.

Thank you for your help in advance.

(Image with the box surrounding "Adresse e-mail" is what I have right now, would want to look like the other one)

1582895490_Screenshot_2021-03-25Afsana-UneboutiquededcoetlifestylebaseParisinspireparlartisanatpakistanais.png.f75f2e1571dbacb67121f13ca6007961.png1460983312_Screenshot_2021-03-25GhostPlugins-FreeSquarespacePluginsandTemplates.png.11ade52963e8a3b4a3db71be1abd6fb0.png

Link to comment
  • Solution
7 hours ago, kamiltariq said:

Site URL: https://www.afsanaparis.com

Hello,

I'm trying to improve the newsletter on my website.

I want to replace that box where a person would enter their email with just a thick line.

I tried one plugin but it just gives a terrible result on mobile.

Thank you for your help in advance.

(Image with the box surrounding "Adresse e-mail" is what I have right now, would want to look like the other one)

1582895490_Screenshot_2021-03-25Afsana-UneboutiquededcoetlifestylebaseParisinspireparlartisanatpakistanais.png.f75f2e1571dbacb67121f13ca6007961.png1460983312_Screenshot_2021-03-25GhostPlugins-FreeSquarespacePluginsandTemplates.png.11ade52963e8a3b4a3db71be1abd6fb0.png

try

#block-yui_3_17_2_1_1616697539653_8282 .newsletter-form-body {
    max-width: 500px;
    display: flex;
    margin: 0 auto;
    align-items: flex-end;
}
#block-yui_3_17_2_1_1616697539653_8282 .newsletter-form-field-element {
  border: none;
  border-bottom: 2px solid #000;
}
#block-yui_3_17_2_1_1616697539653_8282 .newsletter-form-fields-wrapper {
  padding-right: 10px; 
}

image.png.00456a91c73df5d3c00a550df6b46668.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 7 months later...
On 3/26/2021 at 2:35 AM, bangank36 said:

try

#block-yui_3_17_2_1_1616697539653_8282 .newsletter-form-body {
    max-width: 500px;
    display: flex;
    margin: 0 auto;
    align-items: flex-end;
}
#block-yui_3_17_2_1_1616697539653_8282 .newsletter-form-field-element {
  border: none;
  border-bottom: 2px solid #000;
}
#block-yui_3_17_2_1_1616697539653_8282 .newsletter-form-fields-wrapper {
  padding-right: 10px; 
}

image.png.00456a91c73df5d3c00a550df6b46668.png

I want to make the form field narrower on mobile on my site, can you help? Thanks!

Link to comment
On 10/30/2021 at 4:03 AM, SSong said:

I want to make the form field narrower on mobile on my site, can you help? Thanks!

You mean footer field? Make them stacked & fullwidth?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.