Changing Newsletter Button to a Line

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

Hi all!

I'm attempting to make the newsletter feature in the footer look something like this:

but currently it looks like this:

The goal here is to transform the Subscribe button to be a line matching the name and email field. 

This is the CSS I've come up with so far (devs, I hope this is laughable/enjoyable for you :)) 

On a random but noticeable note, the heading text of the newsletter is not changing to the same text as the other footer titles no matter what I type in for font size. Would love help with that as well 🙃  It's been giving me a bit of a headache.

3 hours ago, dombomb said:

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

Hi all!

 

I'm attempting to make the newsletter feature in the footer look something like this:

but currently it looks like this:

The goal here is to transform the Subscribe button to be a line matching the name and email field. 

This is the CSS I've come up with so far (devs, I hope this is laughable/enjoyable for you :)) 

 

On a random but noticeable note, the heading text of the newsletter is not changing to the same text as the other footer titles no matter what I type in for font size. Would love help with that as well 🙃  It's been giving me a bit of a headache.

 

You can use this for button border

.sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-button {
  border: none !important;
  border-bottom: 1px solid rgb(0 0 0 / 12%) !important;
}

Also make the comment in this format /* newsletter */, use // it make the less snippet invalid and can not be parsed

THANK YOU SO MUCH!!!! @bangank36 🥳

12 hours ago, bangank36 said:

You can use this for button border

.sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-button {
  border: none !important;
  border-bottom: 1px solid rgb(0 0 0 / 12%) !important;
}

Also make the comment in this format /* newsletter */, use // it make the less snippet invalid and can not be parsed

The underline worked like a dream! The newsletter, however, is still not behaving 😂 

Do you by chance know what I can use to make the text and color match the other titles?

Also tried changing the newsletter body text size (First Name, Email) but they don't budge either. 

This is what the newsletter title looks like  🤣

/*newsletter*/
.newsletter-form-header-title {
font-family: mr-eaves-modern;
font-size: 11px;
font-weight: 300;
font-color: #626262;
letter-spacing: 0.3em;
line-height: 1.2em;
text-transform: uppercase;
}

@dombomb Do you still need help with newsletter size?

also, do you want to solve these?

Site URL – https://www.domtetro.com/

1. (Mobile-Footer) Move newsletter to under links?

2. (Mobile-Homepage) Black bar on bottom of screen when scroll up?

3. (Mobile-Our story) Move image to top of text?

4. (Mobile-Services) Change order of these text?

5. (Mobile-Header) Equal space between items?

6. (Mobile-Portfolio) Reduce top spacing?

7. (Tablet-Portfolio) Change to 2 or 3 items/row?

@tuanphan All of the above please! That would be so helpful! I'm struggling at the moment. 

On 5/21/2021 at 12:39 PM, dombomb said:

@tuanphan All of the above please! That would be so helpful! I'm struggling at the moment. 

Q1, 2, 3, 4. Add to Design > Custom CSS. If it works, let me know. We will check other questions

/* Mobile */
@media screen and (max-width:767px) {
/* q1.Footer */
div#footerBlocksMiddle>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
/* q2. hide black bar */
.Mobile-bar.Mobile-bar--bottom {
    display: none;
}
/* q3. our story */
div#block-yui_3_17_2_1_1621660618018_43242+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
/* q4. services */
div#page-60961f6f92caf154da514620>.row:nth-child(2) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

12 hours ago, tuanphan said:

Q1, 2, 3, 4. Add to Design > Custom CSS. If it works, let me know. We will check other questions

/* Mobile */
@media screen and (max-width:767px) {
/* q1.Footer */
div#footerBlocksMiddle>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
/* q2. hide black bar */
.Mobile-bar.Mobile-bar--bottom {
    display: none;
}
/* q3. our story */
div#block-yui_3_17_2_1_1621660618018_43242+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
/* q4. services */
div#page-60961f6f92caf154da514620>.row:nth-child(2) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

 

THANK YOU SO MUCH @tuanphan 🥳!!!!!! Those all worked perfectly. 

2 questions for you:

1. Do you know how to make the mobile newsletter title in the footer the same as the desktop view? It's going back to the default. 
2. Do you know how to do a hover line effect on the url links in the body and footer text? I have a code for it but it's not working - I'll reference it below:

/* link hover */
#page a {
text-decoration: none !important;
background-image: none !important;
position: relative;
}
#page a:after {
content: "";
background: currentColor;
height: 1px;
width: 100%;
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#page a:hover:after {
width: 0;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

Thank you so much! 🤗