Problems with CSS RULE.

adsoma

Hi Guys, I bought a RSComments component, after installation I noticed that is not looking good in "mobiles"
I contacted the RSJOOML for support and here is what they suggested. Can you give a hand with that?

RSJOOMLA RESPONSE:
################################################
" previously mentioned, what you're encountering is related to your template styles. For example:

The fields are displayed to the right (please see 'rsc1' screenshot) due to the following CSS rule:

form:not(.form-no-margin) .control-group .controls {
margin-left: 220px;
}

..located under this path:

https://adsoma.com/templates/ja_coach/css/template.css

If you'll disable this using the browser inspector (see 'rsc2') you will notice that the fields will be displayed normally.

After disabling the above CSS rule you will notice that these fields are not displayed full width (please see 'rsc3' screenshot) due to the following CSS rule:

.form-control, .acym_module_form input[type="email"], .acym_module_form input[type="text"], #acym_wrapper .acymfrontarchive #acymfrontarchive__search input {
max-width: 240px;
}

..located under this path:

https://adsoma.com/templates/ja_coach/css/template.css

If you will disable this rule using the browser's inspector (please see 'rsc4' screenshot), you'll notice that this will be displayed normally.

The blue icons are displayed in this manner due to the following CSS rule (please see 'rsc5' screenshot):

.btn, .blog-list .item-readmore a, #acym_wrapper .acymfrontarchive #acymfrontarchive__search button {
...
padding: 1.05rem 2.133rem;
...
}

..located under this path:

https://adsoma.com/templates/ja_coach/css/template.css

If you will adjust this rule using the browser's inspector (please see 'rsc6' screenshot), you'll notice that these icons will be displayed normally.
############################################################
attached images

saguaros

Hi adsoma

JA Coach provides style for forms like what you mentioned above. Apparently, RSComments component also uses that form with the same class and it has conflict in style here. The thing is we have form in other parts of template also and it's not ideal to remove style as they replied.

JA Coach doesn't support RSComments component by default, so it's best if you can contact them to override style for this component. For example:

.rscomments .rscomment-form .controls {
    margin-left: 0px !important;
}

and put into the file: [root]/templates/ja_coach/css/custom.css

They know elements of their extension well so it's better to ask them for how to override each so it will not be affected when you update new version.

Regards

adsoma

Hi, here the answer that I got from RSJoomla.

###########################
Please note that such discrepancies are caused when trying to mix multiple frameworks, which appears to be the case. Your template loads Bootstrap 4 while RSComments! has been designed to work and use the native Bootstrap framework, this being Bootstrap 2.3.2 for Joomla! 3.x and Bootstrap 5 for Joomla! 4.x. We've always tried to use the Joomla! framework standards - that's why our products are using whatever Joomla! supplies.

Yes, a template may look nice because it's been customized to fit the Joomla! standard components, but add any third party extension that uses the same standard Joomla! Bootstrap version and you'll end up with similar issues.

If your template doesn't provide some compatibility declarations for the standard Joomla! Bootstrap version, there will always be such inconsistencies. As previously mentioned, you can however temporarily switch to a standard Joomla! template like Cassiopeia:

https://adsoma.com/de-mis-manos/energia-eolica-energia-limpia.html?template=cassiopeia

.. and you'll see that RSComments! is displayed properly. In such situations we recommend directly contact the template developers directly regarding this matter, they should be able to provide assistance.

Regards!
############################################

Any clue here please?

saguaros

adsoma I totally understand your situation in which you're in the middle position here, of course, I can tell you that the issue is not from our template and they will do the same. I don't want to ping pong here but please check my above reply, changing the core style in template will affect other parts of template which I believe it's more important as the comment section will be in article view only.

So I suggested to override the style for the form of comment and I also provided a sample override for it. I don't think it's hard for them to suggest you which elements for the form that you should override.

adsoma

saguaros
They provided a CSS code, but still does not seem fine.

Here how should be showing:
https://adsoma.com/de-mis-manos/energia-eolica-energia-limpia.html?template=cassiopeia

This is the code they provided

.rscomment-form .control-group .controls {
    margin-left: 0 !important;
}

.rscomment-form .control-group .controls .form-control {
    max-width:100% !important;
}

.rscomment-comment-area .btn {
    padding:3px !important;
}

I added to custom.css but the buttons still are awful.

https://adsoma.com/de-mis-manos/dependencia-a-los-celulares-y-sus-consecuencias.html

If you can give me a hint, I really appreciate.

Regards!

saguaros

You can change:

.rscomment-comment-area .btn {
    padding:3px !important;
}

to:

.rscomment-comment-area .btn {
    padding: .6rem 1rem !important;
    background-color: #fff !important;
    color: #353b41 !important;
    border-color: #ced4da !important;
}

And add this also:

.rscomments .btn {color: #353b41 !important;background-color: #fff !important;border-color: #ced4da;padding: .6rem 1rem;}

.rscomments .btn.btn-primary {background-color: #112855 !important;color: #fff !important;}

adsoma

Thanks, you can close the ticket.