Unexplained Text size changes in JA Social II Community Builder

iaeendo

I've been using the JA Social II template for Joomla for over a year. For the most part it has displayed properly. In the past few months, however, there has been a change in the text size (smaller font in some modules, but not others) alignment of columns and tables has been off.

I use Community Builder and notice the problems in the viewing of the profile pages, but also with the GroupJive plugin, perhaps in other places as well.

Screenshots are attached. The text in the main body of the page is small, too small to view on some screens. I think this changed with the update to the June 1, 2018 release of the template (but I could be mistaken)

Also, with the profile the canvas and the profile picture are supposed to be overlapped and not separate. This has never been right since the first version was installed.

Can you provide any guidance regarding how these layout/template issues can be resolved?

Thanks.

saguaros

iaeendo

Hi,

The provided login info doesn't work, kindly check and update again.

And if possible, share me screenshots illustrate the modification you expect. I will check and help you out.

Regards

iaeendo

saguaros

My apologies. I think I must have given an incorrect backend password. I corrected it and confirmed the login is working properly now. If you need FTP access, please let me know I will provide.

I would like the community builder body text to match the size of the top menu.

I did place my question on the community builder (joomlapolis) support forums and got this reply:

(pasted text)
Bootstrap 4 uses rem font sizing. The way rem sizing works is it sizes based off its root element. This would be html element. Your template has likely set a small font size (12px most likely) on the html element of your site. This will cause all font in CB to be based off that. To fix this you need to fix your Joomla templates font size. Check if your template has a parameter for this or if your Joomla template allows custom CSS to apply your fix there.

It is important that templates do not apply a font size to the html element as it breaks scale-ability of devices. The reason you're seeing this now is the font-size reset on cb_template class used to be 14px. That meant it never scaled based off your root element, the agent, or the view size. Now it's reset to 1rem and the way rems work is they're just a multiple of the root size. So if the root size is 12px and CB resets to 1rem then the size is 12px. In short the small font you're seeing is the font size that had always been there; it's just working now.

aman204

iaeendo I would like the community builder body text to match the size of the top menu.

Try add this to custom.css file and adjust font-size accordingly :

.cb_template .row > [class*="col-"],.cb_template .nav-item, .cb_template .nav-link{font-size:14px !important;}

Kindly ensure to clear your browser cache if changes dont reflect

Also, Can you provide clear screenshots as the current ones are acutely small and text/annotations are hardly visible

iaeendo

Thanks for the help. Just for clarification, I believe the recommendation was to not specify a font size and allow for scalability.

(posted text from CB forum)
It is important that templates do not apply a font size to the html element as it breaks scale-ability of devices. The reason you're seeing this now is the font-size reset on cb_template class used to be 14px. That meant it never scaled based off your root element, the agent, or the view size. Now it's reset to 1rem and the way rems work is they're just a multiple of the root size. So if the root size is 12px and CB resets to 1rem then the size is 12px. In short the small font you're seeing is the font size that had always been there; it's just working now.
(end paste)

So if I use the .css modification and specify 14px, is that the best fix? Will the modification allow for the scalability?

Thanks again.

aman204

iaeendo So if I use the .css modification and specify 14px, is that the best fix? Will the modification allow for the scalability?

As also suggested by Paul, You may instead use em in order to ensure scalability as also stated here in this blog

“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.

paulus1031

In that case then no using px probably isn't the best solution - I'd try with em

The rem unit is relative to the root—or the html —element e.g. 12px
compared to em which is relative to its parent element

.cb_template .row > [class*="col-"],.cb_template .nav-item, .cb_template .nav-link{font-size:1.167em !important;}

Try adjusting this value to it looks better

Cheers
Paul

iaeendo

Is there a planned update to the template that will utilize the "em" scalable unit now that CB has made this change?

aman204

iaeendo Is there a planned update to the template that will utilize the "em" scalable unit now that CB has made this change?

Based upon your suggestions, Will pass on the same to JA Dev. Team so that it may be put up for consideration in future version releases however the E.T.A would depend upon the complexity and other linked parameters

Probably, We should see the respective change in template which will be updated for Joomla 4 as J4 when released, will already come with bootstrap 4 integration

You can always try the suggestion provided above in order to append em to parent element

iaeendo

Hello, just checking in again. I noticed there is a new version of the JA Social template (1.1.0) released Dec 2018. Will this version have the modifications for improved formatting?

aman204

iaeendo I noticed there is a new version of the JA Social template (1.1.0) released Dec 2018. Will this version have the modifications for improved formatting?

You may kindly refer to changelog here as I can see that the specific core improvement will come with template which will come with Joomla 4 release ever since, Joomla 4 will integrate Bootstrap 4 by default

As suggested earlier, You may kindly apply the CSS fix to ensure scalability