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