Multilanguage lost flags in smartphone version

hi, I'm creating a multi-language site (I use falang for translation management) and everything works properly. I only have a small problem: when you view the site in mobile version (smartphone) flags are no longer visible. The mouse feels the area with a link to change the language but can not see anything.
I did not understand how css decides the disappearance of the flags, can you help?

Could You post an url to your site?

Hi, it depends on where you put flag module,
but I was wondering it's fault because Joomla can discover language of browser and choose right lang version.

p.s.
Of course if you still need flags add here URL of your website, I will write what to change.

See below default Plug-in: System - Language Filter settings

After reviewing your sites code, it seems that your problem lies in mobile.css file around line number 160:

Code: Select all

#gkTopLinks a {
   border-left: 1px solid #fff;
   border-left: 1px solid rgba(255, 255, 255, 0.5);
   display: block;
   float: left;
   height: 46px;
   margin-left: 5px!important;
   margin-top: 0;
   text-indent: -9999px;
   width: 38px;
}


using text-indent: -9999px hides all text and images from inside of this element, so that would be a place to start.

So the first step is to remove text-indent from that element.
Also around line no 105 of the same file:

Code: Select all

#gkTopLinks {
   float: right;
   font-size: 11px;
   line-height: 11px;
   margin: -26px 0 0 0;
   text-transform: uppercase;
}


replace with:

Code: Select all

#gkTopLinks {
   float: none;
   font-size: 11px;
   line-height: 11px;
   margin: 0 0 0 0;
   text-transform: uppercase;
}


also add:

Code: Select all

#gkTopLinks a#btnLogin {width: 100px;}


to the same file.

That would be just for start.

p.s.
Remember to use bigger flag icons, because default 16x16px icons are to small to touch by finger ..and users will be irritated

Thank you very much for the solution.
I state that I use to translate an commercial plugin which requires the exclusion of the plugin "System-Language Filter settings".
I applied the changes you have reported and still have a problem, there is an overlap of the flags above the logo. This due to the presence of the flags flanked by the button of access for users. I made a few attempts but still not able to solve.
I could also exclude, in the mobile version, the login button users (I tested whith an a#btnLogin { display=none;} ) but, in doing so, they lose the float and the flags are arranged vertically.
You can still help me?

PS: Pawel, I agree with you about the size of the flags, unfortunately, are inserted through the html code and not with the css and then I will provide for their replacement after solving the first problem.

Ok, it seems that there is small issue with css loading order. Ill ask developers how to fix that, and then I will be able to help You with the css.

Ok, You need to make small change in file:
/templates/gk_bikestore/layouts/default.php:

line 16:

Code: Select all

$this->layout->generateLayout();


replace with:

Code: Select all

//$this->layout->generateLayout();


line 42 and further:

Code: Select all

<?php $this->layout->loadBlock('head'); ?>
<?php $this->layout->loadBlock('cookielaw'); ?>


replace with:

Code: Select all

<?php $this->layout->loadBlock('head'); ?>
<?php $this->layout->generateLayout(); ?>
<?php $this->layout->loadBlock('cookielaw'); ?>


Adter that we can work on other stuff.

Cyberek, I'm very grateful for the support that you give me ... Unfortunately, even with these changes is missing the logo ... you can sign in to check the result ...

at the end of mobile.css add:

Code: Select all

#gkTopLinks {
margin-right: 0px!important;
margin-top: 0px!important;
}
.mod-languages {margin-top: 0px;}


and if You would like to hide My ACCOUNT:

Code: Select all

#gkTopLinks #btnLogin {display: none}


ok, we're almost there ... Now the smartphone version is ok (I just have to better position the flags, I do it quietly) but I realized (enlarging a little 'window) that the tablet version has "lost" the image of backgroud ...

no, sorry, I may have already found, it is the image bg_base_tablet

ok, everything is fine, thank you very much

I would suggest not to use default joomla flag icons, but to throw them away again with text-indent: -9999pxl and using background image to place them back as your own images.