JL_company_free Template not mobile friendly

[svavakim]

Hi, my website (www.stat.ch) is using JL_company_free template version 1.0.1 based on Warp Framework 7.3.22.
On my both android browsers (Chrome and ?) the website logo doesn't appear while on the computer Firefox, Safari and Chrome browser they do appear. I cannot find documentation about Warp settings and don't see where such a setting could modulate the hidden logo file on smaller screens.
Is there someone with experience in making logos visible on mobile screens with Warp 7 framework?
Or which template/framework should I use to replace JL_company_free template version 1.0.1 based on Warp Framework 7.3.22?
Thanks a lot!

[AMurray]

First, I would update the Framework to 7.3.7 from 7.3.22. Refer https://warptheme.com/joomla-tutorials/ ... t-version/ for updating instructions.

Second, for other templates or frameworks, just Google for them. I (for one) use Helix framework and Helix Ultimate Template - suits my needs just fine.

Third, if you want to avoid using such frameworks why not try Protostar, the included template in Joomla. It's responsive, you won't get that image/logo issue.

Finally, it's probably better to ask about specific products on the Warp framework forum: https://warptheme.com/forums/forum/support/ as responses will more likely be from the developers and/or people using the templates.

[svavakim]

Hello AMurray,

thank you so much for your reply.
In the meantime I have downloaded the latest version of the Warp 7 framework.
Now I am trying to update my website (stat.ch) with this latest framework version using these both help pages here:
1)
https://warptheme.com/joomla-tutorials/ ... t-version/
2)
https://docs.joomla.org/J3.x:How_to_use ... te_Manager

What I don't understand is the following: (I have a zip file for this latest warp-7-framework version that contains plenty of folders and files), do I need to read in each of those individual files in my template editor??I can create new folders and I can upload new files, but I CANNOT upload a whole zip file.

Many thanks in advance again for your help.

[AlexVega]

HI there,

In this free framework the logo is via module, so you need have a custom module with the image but also the framework provides a small logo position, so you need two modules.

Check first if you have one for logo position an other for logo-small position.

[svavakim]

Hi AlexVega,

Brilliant! It works , the small-logo is now visible on the mobile display of my website (www.stat.ch).
Now I have another beauty issue: the logo is inbetween the grey border and the white background box. The articles are always displayed with white background. Is there a possibility to shift this small-logo up so that it is entirely with white background?

[AlexVega]

Brilliant! It works :) , the small-logo is now visible on the mobile display of my website.

Glad to know!.

Now I have another beauty issue: the logo is inbetween the grey border and the white background box. The articles are always displayed with white background. Is there a possibility to shift this small-logo up so that it is entirely with white background?

This happens because at this time your mobile logo exceeds the size of the container (the white area) and that's why you see it in the gray area.

The gray area is the margin between sections, one solution is delete the margin in the mobile view, with css media queries, follow this steps:

- Add a css file called user.css for your custom css code
https://docs.joomla.org/J3.x:Adding_a_c ... _Protostar

- Add the css media queries:

Code: Select all

@media (max-width: 768px) { .tm-header { margin-bottom: none; } }

[svavakim]

Hi AlexVega,

thanks for your reply.
I have installed ProtostarPlus Eighteen and added a custom.css file.
The small logo looks now like this:
www.stat.ch
It is a bit too small. I would like to enlarge it within the white box.
Is there another page on https://docs.joomla.org to learn how to resize logo images?

Many thanks in advance.
Svava Kim

[AlexVega]

It is a bit too small. I would like to enlarge it within the white box.
Is there another page on https://docs.joomla.org to learn how to resize logo images?

In this case this is a CSS question instead of Joomla!, try this:

Add to your custom css file this code:

Code: Select all

.tm-logo-small {
  max-width: 100%;
}

.tm-navbar .uk-navbar-content {
  padding: 0;
}

[svavakim]

Hi there, I need more help with this CSS coding.
My questions are
1) Where can I learn more how to do it?
2) does this new user.css file has to appear in the CSS folder?
Mine lines up on the bottom of the folders.
3) How do I name a new .css file? User1, user2?
I didn't like the JoomlaShack videos "How to Use CSS with Joomla" so much as the teacher uses other software to show his codes..
Thanks a lot in advance. Best wishes from England.

[AlexVega]

Hi there, I need more help with this CSS coding.
My questions are
1) Where can I learn more how to do it?
2) does this new user.css file has to appear in the CSS folder?
Mine lines up on the bottom of the folders.
3) How do I name a new .css file? User1, user2?
I didn't like the JoomlaShack videos "How to Use CSS with Joomla" so much as the teacher uses other software to show his codes..
Thanks a lot in advance. Best wishes from England.

1- https://developer.mozilla.org/en-US/docs/Web/CSS
2. If you follow the steps mentioned above, the file must be located in the css folder of your template.
3. Use the template manager.

Try to add all your custom code into one single css file, less files in better.

[svavakim]

Hello!
I have added now a user.css file with your suggested code in my css directory of my Protostarplus-eighteen template in the Joomla backend.
A screenshot of my code is attached.
Is there an error?
My small-logo looks still the same: www.stat.ch/en
Thanks again in advance for your comment.
Best wishes