Logo in desktop and mobile (responsive) view

Hi,

I have a logo setup for the desktop view (normal) and one for mobile devices (smaller size).
In the Host template, text was used to create the logo, so not possible to determine what is the height that should be used for a graphical logo. It seems that images are stretched to a certain size if they are too small which results in loss of quality. So I was wondering what is the required size for the logo in desktop view and in mobile view ?
I have 2 modules in the logo position, both containing the desired logo, but in 2 different sizes. Using the customizer > Modules I have selected which module to show in which display. The desktop logo should show up on PC's and tablets while the mobile logo should show up only on mobiles...
I have both modules being displayed on any display I'm selecting. Next to that, the smaller logo I used for the module that is displayed on mobiles is being stretched out of proportion, even when I define the dimensions of that image in the <img> tag.
I'm sure I'm missing something very obvious, but I'm failing to see it.
The site is in development and therefore in offline mode. Is there anything you can think of with the above info that puts me in the right direction ?
Let me know if you need access to the site to see things yourself.

Sorry I dont know what do you mean?
And without a live Url I can not help you..

Hi,

Sorry for the confusion - I have added a screenshot.
There are 2 modules: one is for the logo in desktop view, the other one is for the mobile view. However, both desktop and mobile logo show up on mobile devices...
I can send you an account to look at the site (where do I send it to?). It only goes live on 01/09. The content cannot yet be public...

Thanks,
Mario

Hi there,
please delete one of your logo module and insert both logo text into one module.
After that you can manage the visibily with css classes like that

<p class="uk-visible-large" style="font-size:22px"><i class="uk-icon-server"></i> LOGO Desktop</p>
<p class="uk-visible-small" style="font-size:22px"><i class="uk-icon-server"></i> LOGO MOBILE</p>

Hi,

Thanks - I'm afraid I'm having an image based logo (which you could not see in the screenshot - my appologies - I should have mentioned that).
That is why I was using a normal size logo in one module and a smaller size logo in another...

I see what your suggested solution would accomplish. Can we do this in some other way with image based logos ?

Thanks,
Mario

You can use the css class everywhere you want:

<img class="uk-visible-large" src=".png" alt="" border="0" align="left" width="" height="" />