CTA Alignment On Same Line

[Kgeriak]

Hello Looking for some assistance with aligning a CTA with a email field as shiwn in the examples below. 
The CTA should be at the right end side of the email bar per originial design: https://beqom.github.io/beqom-website/subscribe

We have it in the global footer but the css styling doesn't work for the page we are trying to make this work on: https://www.beqom.com/subscribe-to-our-blog

I have tried basic css and html trcks but nothing moves the button to the same line. Please let me know if you need anything else.

Thanks

[MitchL]

Hi @Kgeriak,

I was able to fix your issue by changing a few things:

First I changed with classes "width: 100%" to "width: auto;":

.newsletter-sub form .hs_email.hs-email.hs-fieldtype-text.field.hs-form-field {

width: 100%;  width: auto;

}

Then I just removed the "width: 33%" from this class:

.newsletter-sub form input[type="email"] {

width: 33%; 

border-radius: 3px;

border: 1px solid #dfe3e6;

padding: 0.8rem 1rem;

box-sizing: border-box;

font-size: 20px;

}

If you think making these changes globally will affect other areas of the site, I would recommend overriding these styles for this specific page or form instead. 

[Kgeriak]

MitchL,

thank you that is all great and looks very good. However the only hiccup is the footer Newsletter subscribe disclaimer. It needs to be the width of the email sign up and button at the bottom. The footer os global and not sure why this gets effected when you change the other sign up?

Thanks

Ken

[dennisedson]

@Kgeriak,

.newsletter-sub form .hs-richtext p {
    font-size: 12px !important;
    max-width: 60%;
    text-align: center;
}

 is targeting both form paragraphs.  add this to your css:

.newsletter-sub .main-footer form .hs-richtext p {
    max-width: 100%;
}

[Kgeriak]

Dennis I tried it multiple places to see which style shet works. any idea whch one? Also maybe you can take a look. See below.

[Kgeriak]

Looks like we are almost there thanks for the help. Appreciate all th einsight and assistance. You guys are are great.

[MitchL]

Hey Ken,

Not sure if you've resolved your issue, but you could just give your main form a class like "blog-subscribe" and then change the css I gave you to: 

.blog-subscribe .newsletter-sub form .hs_email.hs-email.hs-fieldtype-text.field.hs-form-field {

width: auto;

}

.blog-subscribe .newsletter-sub form input[type="email"] {

border-radius: 3px;

border: 1px solid #dfe3e6;

padding: 0.8rem 1rem;

box-sizing: border-box;

font-size: 20px;

}

This way, you'd only be targeting the one form with that css.

[Kgeriak]

It is resolved on every page except the blog sign up page here: https://www.beqom.com/subscribe-to-our-blog

What style sheet would I add that to? I inherited this site and they have soo many style shets its confusing. If you could help that would be great. Maybe the style sheets to add it too and the line number where. Sorry but not used t working with so many diffrent sheets.

[dennisedson]

@Kgeriak,

Markentive_Theme_-_2018/Css/CSS_EN_Beqom_Website_SYSTEM__NEWSLETTER_SUB_08062018_GF.css

line 104

.newsletter-sub form .hs-richtext p

[Kgeriak]

Dennis,  Thank you we added some code to the header adn was able to get the footer all line dup on every page and the form to be aligned better on the subscribe page. My only issue currently is the email sign up form field is just a little too wide. If i could rduce that to make it as wide as the discalimer i will be all set. Thanks

[dennisedson]

@Kgeriak, you have a px width set here:

.newsletter-sub form > div:first-of-type {
    width: 560px;
}

change that to whatever you need it to be.

also, make sure to look at mobile.  noticed that the button text is right aligned 🙂

[Kgeriak]

Unfortnately if i change the pixel size it will chngeboth forms. I think for now it will have to do. But I also see the CTA button wraps under the email field in mobile. This is a tricky item. The footer form works perfectly but i cant mimic it above. If you have any further ideas please let me know.

Thank you

[dennisedson]

.newsletter-sub .main-footer form > div:first-of-type {
    width: 560px;
}
added specificity to target the footer form

[Kgeriak]

Thank you everyone for your help. So we have the CTA aligned but when we go mobile only on chrome (Our #1 Browser for visitors) the button in the footer gets misaligned and the upper cta wraps which is fine but its elongated. I attached images of what is should look like and what it currently looks like on chrome.

[dennisedson]

@Kgeriak,

@media (max-width: ###px){
/* main form: */
  #hs_cos_wrapper_module_1528453644947150 input[type="submit"] {
    text-align: center;
    width: auto;
   }
/* footer form */
  .light-footer .blog-section .hs-form .input{width: 100%}
  .light-footer .actions {
    text-align: left;
  }
  .light-footer .blog-section .hs-form .hs-button.primary.large{
    position: relative;
    width: auto;
  }
}

[Kgeriak]

I dont see this code in the style sheet? Is this code I should add to the sheet if so what line? Also I have ike 3 style sheets not my design and cant locate this code. Thanks again

[dennisedson]

@Kgeriak, this would need to be added.  

where the xxx's are in the media-query, you will need to update that with a px value at which point you want this css to apply. eg 500px.

in your stylesheet, you probably already have a section of media queries.  for organization's sake, i would add there.  

[Kgeriak]

Dennis,

thank you looks like it helped i just cant get the footer sign up button to be centered now. Any ideas?

[dennisedson]

@Kgeriak change this text alignement of .actions

[Kgeriak]

perfect i think its done yikes that  was painful.  Thank you!