[Maya]

Originally Posted by Nicole Sievert

Hi Maya,

Yes, I will need help adding my logo to the new mobile version of store. In system settings - general - mobile version - it defaults to the old site https://driftfacials.ecwid.com There is no option to change this to https://driftfacials.ecwid.com/m so the logo when added (nor the text header) appears on this version of the site.

Hello Nicole,

In order to add your logo on the top of new mobile version, you should use following CSS code:

body.ecwid-rich-mobile div.ecwid-productBrowser {
    background: transparent url(https://driftfacials.ecwid.com/image/209802565?ownerid=4004033) 10px 10px no-repeat;
    padding-top: 235px;    
}

It should be pasted in the end of your custom CSS theme in Ecwid control panel -> System Settings -> Design. https://driftfacials.ecwid.com/image...wnerid=4004033 could be changed to another link to your store logo, if needed.

Good luck!

[Nicole Sievert]

Hi Maya,

Apologies for the delayed response, I have been away on holidays. I tried the code you provided, and that did not work either. Attached is screenshot - it positions the logo as a background - not as a header, so the 1st shopping category is layered over the top.

[QEI Imports]

Originally Posted by Maya

Hello Nicole,

In order to add your logo on the top of new mobile version, you should use following CSS code:

body.ecwid-rich-mobile div.ecwid-productBrowser {
    background: transparent url(https://driftfacials.ecwid.com/image/209802565?ownerid=4004033) 10px 10px no-repeat;
    padding-top: 235px;    
}

It should be pasted in the end of your custom CSS theme in Ecwid control panel -> System Settings -> Design. https://driftfacials.ecwid.com/image...wnerid=4004033 could be changed to another link to your store logo, if needed.

Good luck!

Hi Maya

I tried using this code as well and got the same result as Nicole with the image being overlaid by other items in the product browser, so I tried the following instead:

body.ecwid-rich-mobile div.ecwid-productBrowser-auth{
   background: transparent url(http://www.qei-imports.com/media/3145/QEI_logo_sig_100.png) 10px 10px no-repeat;
height: 80px;
}

This stops the image being overlaid, but as you can see from the attached screenshot (red box), keeps the sign in links & favorites menu at the top of the page but moves the minicart down to the center of the cell.

I couldn't work out how to get control of these elements to be able to reposition them. Do you have any ideas?

Thanks,
Nina

[Maya]

Hello,

Please, try to add following code in the end of your custom CSS theme to display banner properly:

body.ecwid-rich-mobile table.ecwid-productBrowser-auth-mini-horizontal{
  margin-top: -40px;
}
body.ecwid-rich-mobile div.ecwid-productBrowser{
    padding-top: 80px;
    background: transparent url(http://www.qei-imports.com/media/3145/QEI_logo_sig_100.png) 10px 10px no-repeat;
}

[QEI Imports]

Originally Posted by Maya

Hello,

Please, try to add following code in the end of your custom CSS theme to display banner properly:

body.ecwid-rich-mobile table.ecwid-productBrowser-auth-mini-horizontal{
  margin-top: -40px;
}
body.ecwid-rich-mobile div.ecwid-productBrowser{
    padding-top: 80px;
    background: transparent url(http://www.qei-imports.com/media/3145/QEI_logo_sig_100.png) 10px 10px no-repeat;
}

Hi Maya

Thanks for this. Unfortunately it didn't work. Here's a screen shot:



The effect was the same as the css you gave to Nicole - i.e. logo becomes a background and everything sits on top of it. The css for the auth-mini-horizontal class had no effect. I've disabled all for now and returned to my css controlling the -auth class, so that the logo is not being overlapped. Do you have any more suggestions?

By the way, does it make a difference where in my css I place this? As you suggested, I placed your code at the end, but I didn't see any difference when I did that with my snippet, so I've left it at the top (easier to find!).

[Maya]

Originally Posted by QEI Imports

Hi Maya

Thanks for this. Unfortunately it didn't work. Here's a screen shot:



The effect was the same as the css you gave to Nicole - i.e. logo becomes a background and everything sits on top of it. The css for the auth-mini-horizontal class had no effect. I've disabled all for now and returned to my css controlling the -auth class, so that the logo is not being overlapped. Do you have any more suggestions?

By the way, does it make a difference where in my css I place this? As you suggested, I placed your code at the end, but I didn't see any difference when I did that with my snippet, so I've left it at the top (easier to find!).

Hello,

I'm sorry for delay with answer.

It seems that some Ecwid rules were overrided by default Ecwid styles. Please, use !important to solve this conflict.

Try following code instead of yours:

body.ecwid-rich-mobile table.ecwid-productBrowser-auth-mini-horizontal{
  margin-top: -60px !important;
}
body.ecwid-rich-mobile div.ecwid-productBrowser{
    padding-top: 80px !important;
    background: transparent url(http://www.qei-imports.com/media/3145/QEI_logo_sig_100.png) 10px 10px no-repeat;
}

I look forward to your reply.

[QEI Imports]

That worked a treat. Thanks Maya!