Remove the up and down line behavior

Hi,

I inserted this CSS code to reduce the top margin:

.form-row.form-row-wide.create-account {
    margin-top: -25px;
}

Code (CSS):

But, every time I refresh the page, the space that was reduced goes down and up.

It looks like it goes to its previous place and comes back to the rectified place.

How to remove this behavior?

---
Also, in the cPanel editor, I got a warning message that says: "Don't use adjoining classes."
Should I ignore it? Because when we don't adjoin them, the code doesn't work!

Thank you very much,

 

I share with you the screen record showing this behavior:
https://www.screencast.com/t/5HwFdkhcBE

 

I created and added a notice that is just above the "Create an account?".
And, I did some CSS tweaks to adjust the margins.
I tried to use transition:

.form-row.form-row-wide.create-account {
margin-top: -25px;
transition: none;
}

Code (CSS):

But, it doesn't work.

 

Since it's bootstrap or some other css mess, I'd just try different workarounds. Try adding display: inline; or display:inline-block; and/or vertical-align:top;

Try this:

.form-row.form-row-wide.create-account {
margin-top: -25px;
display: inline-block;
vertical-align: top;
}

Code (CSS):

 

Thanks @qwikad.com & @sarahk for your replies,
I tried the suggested code in different combinations, but it doesn't seem to work.

 

I have a question. In that video I see two fields ("First name" "Last name") appearing and disappearing above "Order notes (optional)". Are you trying to hide those two fields completely or what?

 

The two fields ("First Name" "Last Name") that appear and disappear are the shipping address fields.
When the shipping information is different from the billing information, the user must check the radio button to display the list of fields to enter the information.
By default, this radio button is not checked.
This "appearing and disappearing" behavior is caused by a notice I added just above, "Create an account? This also causes "Create an account?" line to move up and down!

 

First thing I'd think of is why are you using a negative margin instead of reducing the bottom padding or margin of the element before it?

Though the use of pixel metrics on text content likely means the entire thing is an accessibility shit-show where if you came to me as a paying client, I'd tell you to throw it all away. As @sarahk said, your expectations are exceeding the capabilities of whatever front-end stack you're using.

I really couldn't tell you more without seeing the actual code, but I suspect you've probably got two to ten times the markup needed and five to sixteen times the CSS needed, possibly with "blocking scripting" involved where scripting shouldn't even be present.

You'll notice most of the other responders keep asking to see the actual code. There's a reason for that. Your goofy little video NOT helping you get an answer.

It's like asking a brain surgeon to supervise the removal of a tumor across a time phone to an 1880's old west dentist.

 

Hi @deathshadow , @qwikad.com & @sarahk

Indeed, I added a notice with this code :

add_action('woocommerce_after_checkout_billing_form', 'my_custom_message');
function my_custom_message() {
  if ( ! is_user_logged_in() ) {
  wc_print_notice( __('Do not have an account yet? Then simply select the checkbox below.'), 'notice' );
   }
}

PHP:

and adjusted margins:

.woocommerce-billing-fields__field-wrapper {
    margin-bottom: 50px;
  
}

.form-row.form-row-wide.create-account.woocommerce-validated {
    margin-top: -25px;
  
}

Code (CSS):