Logo distorted on mobile devices

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 19 replies, 4 voices, and was last updated 8 years by David Martin – Support.

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

Back to forum

Posted in: Atelier
July 21, 2016 at 1:17 pm #282975

AgenceSurprise
Member

Post count: 76

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

July 21, 2016 at 3:58 pm #283021

Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779

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

July 21, 2016 at 4:05 pm #283022

AgenceSurprise
Member

Post count: 76

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 !

July 21, 2016 at 4:21 pm #283025

Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779

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

July 21, 2016 at 4:26 pm #283026

AgenceSurprise
Member

Post count: 76

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…

July 21, 2016 at 4:31 pm #283029

Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779

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

July 21, 2016 at 4:36 pm #283030

AgenceSurprise
Member

Post count: 76

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,

July 22, 2016 at 5:05 pm #283365
David Martin – Support
Moderator

Post count: 20834
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?
July 22, 2016 at 5:20 pm #283382

AgenceSurprise
Member

Post count: 76

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,

July 25, 2016 at 12:24 pm #283646

David Martin – Support
Moderator

Post count: 20834

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

Thanks.

July 25, 2016 at 1:35 pm #283679

AgenceSurprise
Member

Post count: 76

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.

July 26, 2016 at 9:15 am #283865

Kyle – SUPPORT
Moderator

Post count: 35880

Hi

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

– Kyle

July 26, 2016 at 9:24 am #283868

AgenceSurprise
Member

Post count: 76

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.

July 26, 2016 at 9:27 am #283870
Kyle – SUPPORT
Moderator

Post count: 35880
That’s odd, try this css:
```
.product .sku_wrapper {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}
```
– Kyle
July 26, 2016 at 9:33 am #283874

AgenceSurprise
Member

Post count: 76

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

Posted in: Atelier