CTA Alignment On Same Line

Regular Contributor

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

Reply
0 Upvotes
19 Replies 19
Regular Contributor

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 {

width100%;  width: auto;

}

 

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

 

.newsletter-sub form input[type="email"] {
width33%; 
border-radius: 3px;
border: 1px solid #dfe3e6;
padding: 0.8rem 1rem;
box-sizing: border-box;
font-size: 20px;

 

 

Reply
0 Upvotes
Regular Contributor

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

Reply
0 Upvotes
Community Manager

@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%;
}

 

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Reply
0 Upvotes
Regular Contributor

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.

Reply
0 Upvotes
Regular Contributor

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

Reply
0 Upvotes
Regular Contributor

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;
Reply
0 Upvotes
Regular Contributor

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.

Reply
0 Upvotes
Community Manager

@Kgeriak,

Markentive_Theme_-_2018/Css/CSS_EN_Beqom_Website_SYSTEM__NEWSLETTER_SUB_08062018_GF.css

line 104

.newsletter-sub form .hs-richtext p
Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Reply
0 Upvotes
Regular Contributor

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

Reply
0 Upvotes
Community Manager

@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 🙂

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Reply
0 Upvotes
Regular Contributor

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

Reply
0 Upvotes
Community Manager

 

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

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Reply
0 Upvotes
Regular Contributor

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.Screen Shot 2018-12-20 at 10.46.59 AM.pngScreen Shot 2018-12-19 at 12.05.19 PM.pngScreen Shot 2018-12-19 at 12.03.28 PM.png

Reply
0 Upvotes
Community Manager

@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;
  }
}

 

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Reply
0 Upvotes
Regular Contributor

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

Reply
0 Upvotes
Community Manager

@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.  

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Reply
0 Upvotes
Regular Contributor

Dennis,

 

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

Reply
0 Upvotes
Community Manager

@Kgeriak change this text alignement of .actions

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Reply
0 Upvotes
Regular Contributor

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

Reply
0 Upvotes