• Priority: Critical
  • Status: Closed
  • Closed by: Marek (marek)
  • Closed on: 11.11.19, 18:16
  • Reason: Closed
  • Comment: Glad to help!

Ticket #16045 - Many problems with Mobile version

Hi Marek.
All questions for Mobile version because AMP version dosen’t work with our website.

======PORTRAIT MODE

PRODUCT LIST

1) How to set in mobile version
Portrait: 2 products by row
Landscape 3 products by row

For:
-Product List
-Search results
-Brand page
-New products
-Sales
(all product list pages)

2) Facebook box plugin dosen’t work.
In first time open a new tab on navigator.
In second time open Facebook app, but on the homepage not on the store page.

PRODUCT PAGE

3) We can’t click and zoom on photo.

4) Title of plugin are not on several lines. (screen)

5) The thumbnail of products for thoose plugins, always display ACTION BUTTON [see product - favorite - compare] or we must to see thoose action button only when we click on photo like product list(screen)

SEARCH PAGE https://www.byzancechaussures.com/recherche?controller=search&s=boots

6) We have not margin on the left and right from product list (screen)

7) Products always display ACTION BUTTON [see product - favorite - compare] or we must to see thoose action button only when we click on photo like product list(screen)

ALL PAGE

8) The window that appears when you click on the connection icon is incorrectly positioned and can not be used.(screen)
https://www.byzancechaussures.com/

BLOG

9) Blog have no margin too (screen)
https://www.byzancechaussures.com/blog
https://www.byzancechaussures.com/blog/jeux-concours/jeu-concours-2000-j-aime-facebook

HOMEPAGE

10) The slider from your preset template are not responsive on our website (screen)

SPECIFIC TO LANDSCAPE MODE

PRODUCT PAGE 11) Plugins (other products in same category...) have a display bug (screen)

12) Comments have a display bug (screen)

BRAND PAGE 13) Brand page display only one brand by row (screen)

This ticket does not depend on any other tickets.

Max Max (Litoko) 31 Oct 2019, 08:31

It is possible to configure the design for different screen sizes.

However, unless I am mistaken, it is not possible to have different versions depending on the support or to disable row on some devices?

For example on a line 1/3 - 1/3 - 1/3
it is not possible to disable the first 1/3 on mobile, or change the order only on a type of device without affecting the whole.

Marek (marek) 31 Oct 2019, 09:49

1. You have to adjust these options https://take.ms/Xg4mv

2. Facebook works for me in the left column all the time (mobile and desktop)
3. There is no Product Image zoom on mobile devices
4. That is your custom CSS https://take.ms/GaZEa be careful with code
5. that's for better user experience. you can disable that with custom CSS code
...

Max Max (Litoko) 31 Oct 2019, 11:09

1. We only can choose for Calculations for 1500px website width
How to set in mobile version
Portrait: 2 products by row
Landscape 3 products by row

For:
-Product List
-Search results
-Brand page
-New products
-Sales

2.In first time open a new tab on navigator.
In second time open Facebook app, but on the homepage not on the store page.

3.OK it's a shame because it would be interesting to propose especially when the photos are of good quality ...

4. OK its our fault.

5. OK so how to disable it. And how to disable second click to display second image please ?

Max Max (Litoko) 31 Oct 2019, 13:29

Can we just finish this part please ?
Thanks for back.

Max Max (Litoko) 31 Oct 2019, 14:29

Can we just finish this part please ?
Thanks for back.

Marek (marek) 31 Oct 2019, 14:54

Yes, we can. I just have to reply to every customer in our support.
try following CSS, and adjust it to your needs

@media (max-width:400px) {
body #pattern .view_grid .product_list .grid-container {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
grid-column-gap: 20px;
}
}
@media (min-width:400px) and (max-width:720px) {
body #pattern .view_grid .product_list .grid-container {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-column-gap: 20px;
}
}
Max Max (Litoko) 31 Oct 2019, 14:58

Thanks for 1)
We think we have possibility to custom it on BO.

Can you awnser for 2 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 please ?

Thanks a lot Marek.

Max Max (Litoko) 31 Oct 2019, 16:16

Can we finish 2 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 please ?

Marek (marek) 31 Oct 2019, 16:17

yes, I can. please be patient, we have other customers too

Max Max (Litoko) 31 Oct 2019, 16:28

OK we are waiting about you Marek.

Marek (marek) 31 Oct 2019, 16:57

5. Fixed
6. Added a fix to the Customer CSS 7. Fixed
8. Use this CSS:

body #header .widgets-right .dd_container {right:auto; left:0}

9.

#wrapper > .row {margin:0}

10. You have to configure your slider yourself as you like
11. Make sure you have configured page layout correctly in the Page builder
12. you can adjust that with CSS I have provided to you earlier

Max Max (Litoko) 31 Oct 2019, 17:12

Do you custom css in theme editor ?
Because of we custom it too actually.

5. Always need to click 2 times to go to product page.

6. OK thanks.

8. OK

9. OK

10. OK

11. OK

12. Don't understand.
Comments have a display bug

13) Brand page display only one brand by row

Max Max (Litoko) 31 Oct 2019, 17:33

Template dosent use material icon ? Screen

Marek (marek) 31 Oct 2019, 17:35

there is no material icons, but you can add it yourself

Max Max (Litoko) 31 Oct 2019, 17:47

OK Thanks for material.
And for other point ?

Marek (marek) 01 Nov 2019, 14:33

Yes, I have added custom CSS code to Theme Settings
5. I have no idea how to make it work in 1 click
12. Where I can see those comments
13. Adjust this code for any screen and all product listing page

@media (min-width:400px) and (max-width:720px) {
body #pattern .view_grid .product_list .grid-container {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-column-gap: 20px;
}
}
Max Max (Litoko) 04 Nov 2019, 14:34

Yes, I have added custom CSS code to Theme Settings
What code for what ?

5. Really ?
Maybe if we desactive buttons and second image on hover not ?
But we can't stay like this.
User dont understand this system !

12. I can't reproduce it.
I think you have solve problem.

13. OK we are testing your code.

Max Max (Litoko) 04 Nov 2019, 14:54

14. FIRST SCREEN:
Red box: On Iphone 6 we have 3 products by row yet.
Or we need only 2.
Green box: Moreover brand name disapear behind price...

Marek (marek) 04 Nov 2019, 16:13

I don't remember now.
5. Yes, it could solve the problem.
hide buttons:

@media(max-width:600px) {
.product-actions .product-miniature {display:none}
}
Max Max (Litoko) 04 Nov 2019, 16:42

5. Mate are you serious with css display none ???
They are second image on click too.
And hide button will never change our problem...

Max Max (Litoko) 04 Nov 2019, 16:58

15. Search function and design. TWO SCREENS

We can't use search bar with not popup because your autocompletation dosent work on mobile

We can't use pop up too because the screen is zoomed, and it is impossible to see neither the search terms nor scroller at the results level ...

So how to use correctly search function with theme ?

IMG_1466.jpg (282 KiB)
IMG_1467.jpg (292.4 KiB)
Max Max (Litoko) 04 Nov 2019, 18:14

16. REVOLUTION SLIDER
We can't disable revolution slider on mobile.
We have tried in option plugin + with css

Marek (marek) 04 Nov 2019, 21:31

5. What's wrong with CSS solution? You can disable second image in the theme settings
15. something wrong with your serach configuration. It just doesn't work for me.
16. I can only report this issue to the developer. But from my experience they will not help

Max Max (Litoko) 05 Nov 2019, 07:28

5. CSS solution dosent work.
Because of we need to click to see second image.
But we need second image on desktop but not on mobile.
Because user are lost in product list or when they click on module product.

15) Yes indeed, one more problem for us.
So do you know what's the problem ?

16) OK mate.
So we are blockec?
We can"t use revolution slider ?

Regards.

Max Max (Litoko) 05 Nov 2019, 08:17

17) On product list, on all mobile size, user dosent see price and/or brand name...

Max Max (Litoko) 05 Nov 2019, 09:11

18) Instagram plugin problem
Your Instagram plugin is not centered.
Moreover text description is in front of photo...

Max Max (Litoko) 05 Nov 2019, 10:15

Marek.
Can we solve those problems please ?

Max Max (Litoko) 05 Nov 2019, 10:21

19) Users cant see all information to connect or for account.
Moreover on small sizes and very small sizes.

Marek (marek) 05 Nov 2019, 12:37

5. I don't understand the problem. For me it works in one tap by image to got to product page. In any case if you want to change that you can do that as you like with code customization, there is no any problem with that in the theme.
15. I never seen such problem, maybe you modified some scripts?
16. you can hide it with CSS 17.

@media (max-width:600px) {
.pm-details-layout1 #main .view_grid .product-miniature .product-price-and-shipping {position: static;width: 100%;align-items: flex-start}
}

18. There is too much text to display there, I would recommend to display one image per slide for mobile
19.

@media (max-width:600px) {
body .pk_cl li {position:static}
}
Max Max (Litoko) 05 Nov 2019, 14:33

5. User must to click on product 2 times.
So we received a lot of sos message because they think site is in maintenance mode...

15. Not at all.

16. OK so we hide but it remains visible by the search engines and in the code ...

18. The problem is that your plugin display text without tap...so we must to desactive text for all support...

19. OK we try. Thanks.

Max Max (Litoko) 05 Nov 2019, 16:06

5. How to desactive second picture on hover on mobile ?

Max Max (Litoko) 05 Nov 2019, 16:46

Mate please ?

Marek (marek) 05 Nov 2019, 17:02

Use CSS. There is no such option in back office to disable second image for mobile devices only

Max Max (Litoko) 05 Nov 2019, 18:29

5. User must to click on product 2 times.
So we received a lot of sos message because they think site is in maintenance mode...

15. Not at all.

16. OK so we hide but it remains visible by the search engines and in the code ...

18. The problem is that your plugin display text without tap...so we must to desactive text for all support...

19. OK we try. Thanks.

Marek (marek) 05 Nov 2019, 21:14

5. hide the image with css:

@media (max-width:600px) {
.subimage, .product-thumbnail > a > img:nth-child(2) {display:none}
}

16. Unfortunaltely, I don't know another solution

Max Max (Litoko) 06 Nov 2019, 05:32

5. I think it's a joke...
You know very well that this is not what we want.
What we want is to be able to arrive on the product sheet with just one click. And not 2 as currently.
The you propose to hide the second image overflight but it does not change the problem of users.

15. Please find a solution...quickly

16. We have contacted directly editor.
It seems that our problem has not come back to him.
Now work very good.

Max Max (Litoko) 06 Nov 2019, 05:41

20. Brand page contain only one logo by row.
https://www.byzancechaussures.com/marques We need two for max-width:600px

21. CSS bug with information blog.
https://www.byzancechaussures.com/blog This information should appear correctly.

22. Users of the site tell us that they are very often lost with the arrows that are not visible and directly on the photos, products, brands ...
How to solve this problem ?

Max Max (Litoko) 06 Nov 2019, 06:02

23. Instagram plugin is never centered horizontally.
Can you explain us why please ?

IMG_1479.jpeg (308.5 KiB)
Max Max (Litoko) 06 Nov 2019, 06:29

24. Sometimes photo are very slow to display, and user can see an ugly information with size like you can see on screenshot.
How to custome it? Where?
I think we need to insert logo or dosent display it because not professionnal.

Marek (marek) 06 Nov 2019, 10:38

5. there is no another solution. You can only disable it at all
...

Max Max (Litoko) 06 Nov 2019, 10:49

Hi Marek.
Thanks for back.
Please make awnser for other point.
Regards.

Marek (marek) 06 Nov 2019, 10:52

Yes, of course. There are a lot of questions an I need time to reply

Max Max (Litoko) 06 Nov 2019, 11:22

OK we are waiting about you.
Thanks.

Marek (marek) 06 Nov 2019, 12:06

15. As I can see the search is working now, but you hide it on mobile
...

Marek (marek) 06 Nov 2019, 12:34
20. Brand page contain only one logo by row.

if you want to customize the view, you have to use custom CSS

21.:

@media (max-width:600px) {
.slpwf {flex-direction:column}
}

22. you can customise arrows view as you like with custom css. for example:

body .pk-carousel > .pk-nav {background: #fff;border-radius: 50%;}

23.

@media (max-width:600px) {
#footer .widget-instagram .products.pk-carousel.pk-carousel-active {width:100%}
}
Max Max (Litoko) 06 Nov 2019, 12:45

20. Ok

21. Why max-width: 600px?
Ipad is 768 and we have bug too!!!
Why choose 600 each time?

22. Ok if it's the only possibility.

23. Why max-width: 600px?
Ipad is 768 and we have bug too!!!
Why choose 600 each time?

Max Max (Litoko) 06 Nov 2019, 13:34

What is the min-width and max-width of your settings ?

Max Max (Litoko) 06 Nov 2019, 13:40

15. What do you mean ?
Search autcocompletation dosent work.

Marek (marek) 06 Nov 2019, 13:41
Max Max (Litoko) 06 Nov 2019, 13:46

15. What is your support ?

Marek (marek) 06 Nov 2019, 22:54

The problem is because you have two searches at the page, you have to remove one

Max Max (Litoko) 07 Nov 2019, 09:59

15. We can't do it with your page builder system.

21. Why max-width: 600px?
Ipad is 768 and we have bug too!!!
Why choose 600 each time?

23. Why max-width: 600px?
Ipad is 768 and we have bug too!!!
Why choose 600 each time?

24. 24. Sometimes photo are very slow to display, and user can see an ugly information with size like you can see on screenshot.
How to custome it? Where?
I think we need to insert logo or dosent display it because not professionnal.

Marek (marek) 07 Nov 2019, 12:27

you can change "600" to any value you want.
24. Disable Lazy load option in the Theme Settings

Max Max (Litoko) 07 Nov 2019, 16:32

15. We can't do it with your page builder system.
Moreover work on desktop version !!!

24. We don't want to disable lazy load for performance and SEO.
How to custome it? Where?
I think we need to insert logo or dosent display it because not professionnal.

Best regards Marek.

Marek (marek) 07 Nov 2019, 20:38

15. I already explain you the reason of the problem. Just remove one of two searches.
24. I'll update Lazy Load background and check the performance, give me a time

Marek (marek) 07 Nov 2019, 22:16

24. done

Max Max (Litoko) 08 Nov 2019, 08:59

15. OK.

24. OK thanks very much.
What is the bacground now ?

Marek (marek) 09 Nov 2019, 14:06

background is just a color

Max Max (Litoko) 11 Nov 2019, 18:14

OK mate thx

Loading...