Hi there,

It seems that i can't access your backend. Can you provide us with correct backend access for further check on this issues?

Hello Abdul

I have added the login details that you require in the additional info part of my original post.

thanks

Paul

hey Paul,

It seems like the login module if you disable all the button, the total width is 480 ++ which is match the responsive width layout, you can check my following code and attached screenshot below.

JoomlaFolder\media\com_easysocial\scripts\site\layout\responsive.js

        $.responsive(".es-responsive", [

            {at: 2500, switchTo: 'extra-wide wide'}, // http://stackideas.com/forums/profile-layout-breaks-when-resizing-back-up

            {at: 1200, switchTo: 'wide'},

            {at: 960,  switchTo: 'wide w960'},

            {at: 818,  switchTo: 'wide w960 w768'},

            {at: 600,  switchTo: 'wide w960 w768 w600'},

            {at: 560,  switchTo: 'wide w960 w768 w600 w480'},

            {at: 480,  switchTo: 'wide w960 w768 w600 w480 w320'}

        ]);

if you would like to show horizontal for that login module, you have to modify this file to achieve this. (You can refer on my attached screenshot below)

// Modify 

            {at: 480,  switchTo: 'wide w960 w768 w600 w480 w320'}



// Replace to

            {at: 430,  switchTo: 'wide w960 w768 w600 w480 w320'}

You can check this result by switch on development mode from your Easysocial backend.

Hey Arlex

Thank you very much for your detailed explanation.

I have just noticed that when I zoom In even with the Register button there the formatting gets messed up sooner or later.

I guess that the boxes button and menu collide and cause this?

But even after I zoom back Out the formatting is still vertical.
i.e. things are responsive until I zoom in eg 150%
But are no longer responsive when I zoom from 150% back to 100%
i.e. remains vertical

a) Is this normal?

b) Would it be possible to put this fix in the custom css file?
I know that I will forget to fix this after updates
Otherwise I might just switch on the register button as I have done now and have it display correctly!

c) It seems a pity that the login is not aligned with the top of the main menu!

thanks

Paul

Hey Paul,

Actually that was not a bug, just the Elegant template do not have any fix width from the top-right position, so it rely on the module width, if the width less than 480px, the responsive css will kick in, so it will show the vertical layout for the login module.

I've applied some css code in this file JoomlaFolder/templates/elegant/css/custom.css, can you clear your browser and server cache before you load your homepage and see is it work fine? (Remember turn off the register button from module)

@media (max-width: 480px) {

    .navbar-header .nav.navbar-nav.navbar-right {    

        margin: 0 20px;

        width: 80%;

    }

    .navbar-header .module.profile {

        float: none;

        padding: 0;

    }

}



 .navbar-header .nav.navbar-nav.navbar-right {

        width: 560px;

  }

Hey Arlex

Thanks this does the trick.

best

Paul

Hi there,

You are most welcome.

As a gentle reminder, kindly start a new thread if you have any other issue in the future so it will be easier for us to manage your inquiry. I will lock and mark this thread as resolved.