ISSUE SUMMARY: So I purchased Jomsocial and the Socialize theme template. I was given to understand that they are responsive layouts that work well and look great together, so I'm sure this is something that is just beyond my very limited abilities. The issue is that while the site looks fine on various browsers and operating systems, when viewing on phones/tablets etc.. things look pretty scattered. This is especially true for the header, and Events/groups in the side margin. Overall I'm really happy with the products, community and support, but would appreciate one of you clever wizards to help me out to make it work responsively in all devices :) Cheers!


STEPS TO REPLICATE:
1
2
3
4
5
RESULT
EXPECTED RESULT
BROWSER

Hi,

you need to replace login bar at top, by using Community Toolbar for Socialize Template.
currently, you not using that. seem that 3rd party module.

Regards

Thanks for your reply Albertus. I'm not really sure how change the login bar. I did find it odd that it has "LOGIN" and "SIGN IN" next to each other as I think that mean the same thing. Shouldn't it say "SIGN UP"? And I also don't know what 3rd party module it could be there now? Any chance you can let me know any details about that you could help me with? And is there any chance you could swap in the correct login bar from socialize? Do you have any suggestions to fix the Events and Groups which currently display at the bottom of the feed (when on mobile phone) but are also looking like a bit of a mess? Thanks again for your help and patience with a newbie to Joomla. I really appreciate it a lot:)

Thanks for your reply Albertus. I'm not really sure how change the login bar. I did find it odd that it has "LOGIN" and "SIGN IN" next to each other as I think that mean the same thing. Shouldn't it say "SIGN UP"? And I also don't know what 3rd party module it could be there now? Any chance you can let me know any details about that you could help me with? And is there any chance you could swap in the correct login bar from socialize? Do you have any suggestions to fix the Events and Groups which currently display at the bottom of the feed (when on mobile phone) but are also looking like a bit of a mess? Thanks again for your help and patience with a newbie to Joomla. I really appreciate it a lot:)

Hi,

I spotted some CSS changes at your site, seem that CSS for default login form module.
I can give you a hand for the changes. I will make it like this:
socialize.jomsocial.com/

there are many steps, cant describe it at here. please confirm if I can do it for you.

Regards

Absolutely you can make the changes. And thank you very very much for you help with this Albertus. I am so grateful and impressed with the support:)

Hi,

please check it, here the summary what I did:
1. turned off SignIn and Login Form modules
2. turned on Community Toolbar for Socialize Template at top header position
3. at template manager, set socialize layout to Social, instead of Default
4. and put new custom CSS at /templates/socialize/css/custom.css

Regards

Hi Albertus,

Thanks for your reply. The problem seems to still be there, I can't see or click the menu when viewing on mobile phone (iPhone 6) Seems like the logo is stretching and covering up the drop down menu. Also, the events, and groups modules are still broken too. (You can see them if you scroll down to the bottom of the homepage (on mobile phone). The issues are only a problem when viewing on a mobile phone. Are you able to check it on your phone?

Hi,

you mean your site not like this:

No, mine does not look like that. On the iPhone 6 it looks like the screen shot I have attached. I have also deleted my browser cache just to make sure that's not the issue. Even the picture you sent from your phone, the logo looks like it has been stretched vertically. (But at least you can see the menu button) I could send you a good quality version of the logo which has been cropped to the ideal size to insert? What is the best size for the logo to be without stretching or distorting? I am extremely grateful for you help. :)

Hi,

please check it again.

Regards

Great work! The header now looks good on all mobile devices :) However, there is still the issue with how the Events and Groups modules display. Are you able to have a look at it. I think it is just a simple adjustment in the mobile positions but I can't seem to get it to work properly. You can see this issue by scrolling to the bottom of the homepage when on mobile device. I have attached a screenshot as well. Thanks again for such fantastic support.

Hi,

please check it. not sure why template.css at: /templates/socialize/local/css/ containing custom CSS code.
I comment out those code, at the bottom of page.

.logo-image {
    width: 100%;
}
div#form-login-username {
    margin-left: 28.4%;

    margin-right: 15px;
}
fieldset.userdata > div:first-child {
    float: left;
    width: 20%;
}
fieldset.userdata > div:nth-child(2) {
    float: left;
    width: 20%;
    margin-right: 15px;
}
fieldset.userdata > div:nth-child(3) {
    float: left;
    width: 17%;
}
ul.unstyled {
    display: none;
}
.t3-header .col-xs-12.col-sm-4 {
    width: 76%;
}
.col-xs-12.col-sm-4 {
    width: 25%;
}
.col-xs-12.col-sm-8.logo {
    width: 24%;
}
ul.nav.nav-pills.nav-stacked {
    float: left;
    width: 10%;
}
li.item-133 a {
    padding: 7px 20px;
}
.head-search form div {
    float: left;
}
.login-greeting {
    margin-left: 77%;
    margin-right: 1.407%;
    margin-top: 7px;
}

Hi Albertus,

I have no idea why that code is there or how it got there. Is it possible for you to make the changes and delete that code? You can change whatever you think should not be there. Whatever is necessary to make those modules look correct. You are awesome:)