Logo distorted on mobile devices

[AgenceSurprise]

Hi,

I’m having an issue with my logo on mobile devices, it’s crushed.
Would you have an idea to fix it ?

Is there a way to create a new home page that would be shown only on mobile ? Cause my homepage is not suitable for mobile devices.

Thanks in advance,
Léa

[Rui Guerreiro – SUPPORT]

Hi,

This is what I’m seeing when I emulate the iPhone 6
https://www.dropbox.com/s/h1lk3l034idwv0p/Screenshot%202016-07-21%2016.05.51.png?dl=0

Try to clear the mobile browser cache and test in a different device.

You can create different versions of the homepage inside the same page.
Use rows to place the content and in the Row options you can choose where that row is visible(desktop, tablet, mobile)

Hope it helps.

-Rui

[AgenceSurprise]

Hi Rui,

About the logo, I’m not the only one having that issue, even after clearing the cash of my browser…
thanks for the solution with the rows !

[Rui Guerreiro – SUPPORT]

This is what I’m seeing in real Android device.
https://www.dropbox.com/s/hgcunmrwf3jwqvl/screenshot.jpg?dl=0

Will forward to a colleague that has a real iPhone to test it.

-Rui

[AgenceSurprise]

Oh it’s my mistake, we have activated the responsive mode, and with that the logo is fine !

When we are not on responsive mode it’s cruched, we’re not sure about keeping the responsive mode, as we have many problems with it…

[Rui Guerreiro – SUPPORT]

You need to keep it in responsive mode. The major part of our customer use that option, remember that in these days people access websites through the most various devices.

If you have Google analytics installed in your website you can check the percentage of users that visit the site using mobile/tablet.

If you have any issues with the responsive mode let us know.

-Rui

[AgenceSurprise]

Thanks, I’ve seen on analytics that they were a lot of customers on phones.
We are having a lot of issues, some of them :
-the footer isn’t showing as we would like (too big) it would be very nice to be able to create a new footer especially for the mobile version
-the add to cart button on product pages is enormous so as the quantity
-the swift sliders are cropped…

Tell me if you could help with some of it 🙂
Thanks a lot in advance,

[David Martin – Support]

1) That is not currently possible. You could look to alter the padding of the footer in mobile view with CSS.

@media only screen and (max-width: 479px) {
#footer-widgets .widget {
    padding-bottom: 10px;
}
.mc4wp-form-fields p:last-of-type {
    margin-bottom: 0;
}
}

2) You can reduce that on small mobile screens with this:

@media only screen and (max-width: 479px) {
.woocommerce div.product form.cart {
    max-width: 70%;
    margin: 0 auto;
}
}

3) Can you show me an example URL of this?

[AgenceSurprise]

Hi David,

Thanks for your solutions, regarding the third question, we have done an other way, using visibility of the rows as suggested by one of your colleague.

Your css codes doesn’t seems to work…

One more question :
– you had previously given me a css code in order to remove the SKUs and the additional information on desktop view, it still work on desktop, but it doesn’t work on mobile. Would you know how I can do to remove it also on mobile devices ?

Thanks for your help,

[David Martin – Support]

I do not any SKU on mobile view. Please link me to where you see this or add a screenshot.

Thanks.

[AgenceSurprise]

Hi David,

I do, on my mobile and my colleague’s (not when resizing my screen on computer) please see attached.
I would like to remove it and the additional informations

Thanks in advance,

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

David has asked for the link to this product twice, please send it to us so we can check it

– Kyle

[AgenceSurprise]

It’s on all products, but here’s an other one so you can check and one more time a screeshot.

http://www.lagence-surprise.com/boutique/etui-lentille-de-contact-ovnis/
http://www.lagence-surprise.com/boutique/boucles-oreilles-berlingot/

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

That’s odd, try this css:

.product .sku_wrapper {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

– Kyle

[AgenceSurprise]

Thanks Kyle, but it still doesn’t work… isn’t it possible that this css code works on desktop but not on mobile devices ?