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.

1 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 {

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;

.jf_l_pro .jf_l_pro_open_btn {
  • Thanks Richard - A fresh pair of eyes always seems to help :)
    – Dtorr1981
    Commented Mar 21, 2018 at 8:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.