Joomla Templates Club 406,261 posts

[rabbito Friend rabbitoJoin date: February 2015Posts: 14Downloads:330Uploads:9 Thanks: 1 Thanked: 1 times in 1 posts]

#1065079

I want the next two modules, Language Switcher and Login and Register, located in topbar-r position.

If the order of the modules is: 1. Language Switcher 2. Login and Register, the result is shown in image 1.

If the order of the modules is the opposite: 1. Login and Register 2. Language Switcher, the result is shown in image 2.

The right placement of the two buttons in module Login and Register has to look like the one in image 3. What should I do to achieve the desired placement?

I have read all the relevant threads in the forum, but they didn’t help me find a solution.

Please help me solve this problem.

---

Attachments:

1. 
2. 
3. 
4. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1065210

Hi,

You can share the credentials of your site: URL, admin info so I will check for you.

[rabbito Friend rabbitoJoin date: February 2015Posts: 14Downloads:330Uploads:9 Thanks: 1 Thanked: 1 times in 1 posts]

#1065214

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1065238

You can try adding this css rule:

div#mod_improved_ajax_login-229 {
    width: 220px;
    margin-top: 10px;
}

It will look like this: http://prntscr.com/gs6b3u

[rabbito Friend rabbitoJoin date: February 2015Posts: 14Downloads:330Uploads:9 Thanks: 1 Thanked: 1 times in 1 posts]

#1065252

The css rule fixed the problem with the login module (image 1).

But a new problem appeared. When I reduce the window in width the login module covers JACM "What’s new" (image 2).

---

Attachments:

1. 
2. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1065414

Hi,

This due to the responsiveness of this 3rd party module – ajax login module, seems that it doesn’t support responsive layout

At this moment, you can use Media Queries to define style for specific screen: https://getbootstrap.com/docs/3.3/css/#grid-media-queries

For example, with small screen:

@media (max-width: 480px) {
  div#mod_improved_ajax_login-229 {
    width: 220px;
    margin-top: 10px;
 }
}

[rabbito Friend rabbitoJoin date: February 2015Posts: 14Downloads:330Uploads:9 Thanks: 1 Thanked: 1 times in 1 posts]

#1066829

The problem is solved.
I used the following css rule:

@media (max-width: 480px) {
div#mod_improved_ajax_login-229 { display: none; }
}

1 user says Thank You to rabbito for this useful post

1. Saguaros

[Author]

Posts