Problem with centre aligning a module and its content

Question

I am using JF login Pro on a site and can't for the life of me get the login button to dynamically center on mobile devices. I can center it using margins but this will not be dynamic thus the position would move depending on the size of the screen and I think writing media queries for all possible device sizes with specific margins would be a bit overkill.

I was hoping someone may be able to shed some light on this. I've never really had an issue like this before, so i'm guessing the css of the module its self may be to blame. The site can be viewed here It is the Green Login/Logout button that is almost centered when viewing in mobile view in dev tools.

I'm baffled to say the least, so hoping a fresh pair of eyes may help me resolve this annoying issue.

Thank you in advance.

Answer 1

You have a cache on, so I can't point you to the exact place in the code, but basically the outside of the module has the following css at a breakpoint between 320 and 667px:

#search .module-inner {
    margin-right: 22%;
}

And the button is floating to the right within that.

.jf_l_pro .jf_l_pro_open_btn {
   float:right;
}

This means that the button isn't aligned to the middle, but rather floats 22% to the right of the page.

The following css changes should fix it, though it may be tidier to remove unwanted code rather than override it.

#search .module-inner {
    margin-right: 0;
    text-align:center;
}

.jf_l_pro .jf_l_pro_open_btn {
  float:none;
}