CSS problem

@petiteprof79

try this consistent:

If CSS of your theme or some plugins was previously customized for one of the earlier qTranslate forks, you may need to rename prefixes ‘qtrans_’ to ‘qtranxs_’ in the CSS files, or make other meaningful adjustments.

Hi Gunu,
thanks for the quick reply.
I checked. I do have the option of adding custom CSS to my theme just like with the plugin. Which is why I didn’t interfere with any CSS customization apart from that if I recall correctly.

I did change the code to

.qtranxs_language_chooser { list-style-type:none; float:left; }

ul.qtranxs_language_chooser > .active {
display:none;
}

.qtranxs_language_chooser li { float:inline; margin-left:5px }

.qtranxs_flag {
width: 67px !important;
height: 50px !important;
background-size: 67px 50px !important;
}

and deleted the CSS from my theme options

which did put the flags on the left margin of my header. Their size hasn’t changed though, neither has the fact that they are not in line.

Could it have something to do with the setting for css class (ul) for the language switcher with is set to qtranxs-lang-switch-wrap?

@petiteprof79
check this in your CSS img.scale-with-grid, img
This should adjust your view = overwrite?

Couldn’t find. However: I am one step closer. I added a widget to my theme and then it gave me this to change CSS of the widget:

.qtranxs_widget ul { margin: 0; }
.qtranxs_widget ul li
{
display: inline; /* horizontal list, use “list-item” or other appropriate value for vertical list */
list-style-type: none; /* use “initial” or other to enable bullets */
margin: 0 5px 0 0; /* adjust spacing between items */
opacity: 0.5;
-o-transition: 1s ease opacity;
-moz-transition: 1s ease opacity;
-webkit-transition: 1s ease opacity;
transition: 1s ease opacity;
}
/* .qtranxs_widget ul li span { margin: 0 5px 0 0; } */ /* other way to control spacing */
.qtranxs_widget ul li.active { opacity: 0.8; }
.qtranxs_widget ul li:hover { opacity: 1; }
.qtranxs_widget img { box-shadow: none; vertical-align: middle; }
.qtranxs_flag { height:12px; width:18px; display:block; }
.qtranxs_flag_and_text { padding-left:20px; }
.qtranxs_flag span { display:none; }

So I picked what I thought I needed. Now the CSS code looks like this:

.qtranxs_language_chooser { list-style-type:none; float:left; }

ul.qtranxs_language_chooser > .active {
display:none;
}

.qtranxs_language_chooser li { display:inline; margin-left:5px }

.qtranxs_flag { height:50px; width:67px; display:block; }

and the only thing that is still not working is the image size. I wonder what will happen if I simply exchange the images of the icons and use bigger ones. ..

I wonder what will happen if I simply exchange the images of the icons and use bigger ones. ..

Yes, this works.

So will do ??
Will they still be responsive in a responsive theme?
Thanks for the help.

if you not specify fixed sizes… then it will work

perfect. thank you so much!

@petiteprof79

You are welcome!

You can review this plugin to help other people to find out the value.