Notice

The forum is in read only mode.

Support Forum

Welcome! Support Forums have been reactivated

Layout not correct on Android Device

10 years 2 months ago
  • Jared's Avatar
    Topic Author
  • Jared
  • Offline
  • Fresh Boarder
  • Posts: 1
  • Thank you received: 2
Licenses:
JomSocial Expired Socialize Expired

ISSUE SUMMARY:
When logging into JS front mobile device, the vertical display is not correct.

STEPS TO REPLICATE:
1 Log In using Android phone.
2 Look at Main Page

RESULT
Mobile screen displays desktop layout instead of mobile layout?

EXPECTED RESULT
To see mobile layout

BROWSER
Firefox
Samsung Galaxy note 3

Attachments:
10 years 2 months ago
Licenses:

Hi, Jared.

This is caused by your css customization:

ROOT/templates/socialize/css/custom.css line 31:

.joms-sidebar {
    float: right;
    padding-right: 0;
    width: 32.1966%;
}

and line 37:
.joms-main {
    float: left;
    padding-left: 0;
    padding-right: 14px;
    width: 67.8034%;
}

If - for some reason you need above code - you should define for what viewport they apply. As for now they break layout for small screens.


- Instead of saying: 'it's not working', explain the problem in detail.
- Screenshots with the URL visible in them and the problem marked are more than welcome.
- Tell us how to replicate the problem, we can't fix it if we can't find it.
- Make sure that your site/server meets JomSocial System Requirements
- Make sure to setup JomSocial Cron Job
- Always provide us with access details to the backend and ftp. We need it to debug problems.
- If you have a similar problem, but a solution you found isn't working, open a new thread instead of 'merging' with an existing one.

- Use the "Thank You" feature on any post that helped you
10 years 2 months ago
  • Jared's Avatar
    Topic Author
  • Jared
  • Offline
  • Fresh Boarder
  • Posts: 1
  • Thank you received: 2
Licenses:
JomSocial Expired Socialize Expired

Ah, I see. I was able to accomplish the custom width parameters for desktop screens only from 800px wide to full-screen and to disregard the custom widths when the screen is below 800px or any mobile device (normal template responsiveness). I did so with the following media queries and viewport parameters. Thanks for pointing me into the right direction. :)

MEDIA QUERIES attempted:
@media screen and (min-width: 800px) {
.joms-sidebar {
float: right;
padding-right: 0;
width: 32.1966%;
}
}

@media screen and (min-width: 800px) {
.joms-main {
float: left;
padding-left: 0;
padding-right: 14px;
width: 67.8034%;
}
}

VIEWPORT PARAMETERS ATTEMPTED:
.joms-sidebar {
@-ms-viewport { width: 100% !important; }
@-moz-viewport { width: 100% !important; }
@-o-viewport { width: 100% !important; }
@-webkit-viewport { width: 100% !important; }
@viewport { width: 100% !important; }
}

.joms-main {
@-ms-viewport { width: 100% !important; }
@-moz-viewport { width: 100% !important; }
@-o-viewport { width: 100% !important; }
@-webkit-viewport { width: 100% !important; }
@viewport { width: 100% !important; }
}

AND

@viewport
.joms-sidebar { width: 100% !important;
}

@viewport
.joms-main { width: 100% !important;
}

Moderators: Piotr Garasiński
Powered by Kunena Forum

Join 180,000 websites creating Amazing communities

JomSocial is the most complete, easy-to-use addon that turns Joomla CMS into a
full -fledged, social networking site

TRY NOW BUY NOW