Alignment Issue: Button in Email Sign-up Section

[JeevaRamanathan]

Describe the Issue

In the email signup page the button appears to be misaligned resulting in an unbalanced layout.

Affected Page

https://www.freecodecamp.org/email-sign-up/

Steps to Reproduce

1. Sign in as a new user on https://www.freecodecamp.org ( If you have accepted the Privacy Terms ).
2. Upon successful sign-in, you will be redirected to the email signup screen.
3. Scroll down until you reach the email subscription section.
4. Observe that the button is misaligned.

Expected behavior

The button should be aligned properly within its container.

Screenshots

No response

System

• Device: [Laptop]
• Browser: [Edge, Chrome]

Additional context

I would like to work on this

[huyenltnguyen]

@ahmaxed This is unfortunately a regression caused by the Col migration 😞 I tried reverting the Col component replacement and got the correct alignment again.

The problem here is the Bootstrap version has float: left set while ours doesn't, so the fix should be adding this property in, but this would impact /learn and we will need to have yet another round of QA.

I'm leaning toward updating the component, but I also understand that it's not a good use of time to do another QA round for just an alignment issue, so I would like to get your recommendation here. Maybe we could go with a stopgap solution (adding a CSS rule to email-sign-up) and create an issue to track the cleanup?

References:

• Where Bootstrap sets float: left: https://github.com/twbs/bootstrap/blob/f17f882df292b29323f1e1da515bd16f326cee4a/less/mixins/grid-framework.less#L40

[Sujal942]

Hey @JeevaRamanathan i want to work in this issue.

[lucifer100201]

Hey @JeevaRamanathan I want to work in this issue and also fix the issue of button styling which is not aligned.

[huyenltnguyen]

@Sujal942 @lucifer100201 Please read this https://contribute.freecodecamp.org/#/FAQ?id=where-do-i-start-if-i-want-to-work-on-an-issue.

[Anshika-121]

Hello Sir @JeevaRamanathan I would like to work with you and solve the error.

[ShreyasLakhani]

@JeevaRamanathan
https://github.com/freeCodeCamp/freeCodeCamp/assets/105536945/a01a68ac-a8fe-4888-85c5-18843b38002c

In the email signup page, after click on sing up it will automatic sign in without asking mail and redirect to /learn page.

this result not show.

any Idea? anyone.

[AbhinavSingh111]

HI , I have a working solution , please assign it to me.
I would like to work in this.

[huyenltnguyen]

I'm limiting conversation in this issue thread to only moderators and staff members due to off-topic comments.

@JeevaRamanathan I'll follow up with you over your PR once the approach is finalized. And thank you for your patience!

[ahmaxed]

@huyenltnguyen, yes. We should add some CSS for this page for now and address and improve the col component or the grid system all together post migration.