The first block puts them all on the same line with the float. The next block just centers the text more in the middle of the avatar; if you don't like it, you can tweak that or not add it.1) I want the Avatar of the logged-in user to be on the same (desktop) line as the welcome note and the logout button. I like having the "you are logged in" note and user avatar image on the screen so they can see that they are truly logged into the site.
.sclogin #scprofile-pic {
float: left;
}
.sclogin-greeting {
padding-top: 20px;
}
Could you show a screenshot of what you mean? Viewing it on the mobile simulator in my browser or on my mobile phone, I'm not quite sure what you mean as the text is white and doesn't seem to blend for me.2)In mobile view I cant seem the change the text color of the welcome note and it blends into my module position background color
You can target mobile devices with CSS media queries. For instance, the following would be for tablets:3)I also may need the avatar to not show up in mobile view.
@media (min-width: 768px) and (max-width: 979px) { .sclogin #scprofile-pic { display: none; } }
@media (max-width: 767px) { .sclogin #scprofile-pic { display: none; } }
please find the mobile shot below in firefox /android. on my firefox desktop and chrome desktop set to mobile view there is white text but in the actual mobile device view the text is dark and the image still shows up. which is probably what is throwing it back on two lines. also noted, in the actual android the button is smaller that the button on the modified desktop tool.Could you show a screenshot of what you mean? Viewing it on the mobile simulator in my browser or on my mobile phone, I'm not quite sure what you mean as the text is white and doesn't seem to blend for me.
@media (max-width: 767px) { .sclogin #scprofile-pic { display: none; } }
@media only screen and (max-device-width: 767px) { .sclogin #scprofile-pic { display: none !important; } }
Join our newsletter to get alerts for Joomla releases, tips and tricks and extension updates.