• Priority: 0
  • Status: Closed
  • Theme: Venedor
  • Assigned To: Alex
  • Private: No
  • Open Date: 22.12.16, 11:38
  • Opened by: Pierre GUERIN
  • Closed by: Marek
  • Closed on: 01.02.17, 21:51
  • Reason: Closed
  • Comment: Glad to help!

Ticket #10106 - Responsive on tablet

Hi,

I didn’t understand why responsive on tablet was bad, and I noticed that your theme (even on your demo) uses @media (max-width: 767px) instead of @media (max-width: 768px). Especially for menu and category pages, you can see on these screenshots that it’s not very optimized for the user experience…

Menu of our website 768px :
http://image.noelshack.com/fichiers/2016/51/1482402845-capture-d-ecran-2016-12-22-a-11-31-10.png

Menu of our website 767px :
http://image.noelshack.com/fichiers/2016/51/1482402865-capture-d-ecran-2016-12-22-a-11-31-01.png

Menu of your demo 768px :
http://image.noelshack.com/fichiers/2016/51/1482402886-capture-d-ecran-2016-12-22-a-11-32-45.png

Menu of your demo 767px :
http://image.noelshack.com/fichiers/2016/51/1482402910-capture-d-ecran-2016-12-22-a-11-32-54.png

Category page of our website 768px :
http://image.noelshack.com/fichiers/2016/51/1482403043-capture-d-ecran-2016-12-22-a-11-28-03.png

Category page of our website 767px :
http://image.noelshack.com/fichiers/2016/51/1482403062-capture-d-ecran-2016-12-22-a-11-30-40.png

Category page of your demo 768px :
http://image.noelshack.com/fichiers/2016/51/1482403082-capture-d-ecran-2016-12-22-a-11-33-21.png

Category page of your demo 767px :
http://image.noelshack.com/fichiers/2016/51/1482403100-capture-d-ecran-2016-12-22-a-11-33-09.png

It’s better at 767px, but an iPad width is 768px…

Is there a way to change that?

Thanks

Comments

Pierre GUERIN 23 Dec 2016, 12:55

Other issues that have nothing to do with the subject but I don’t want to open several tickets.

2- Is there a way to display the number of products in cart ? As on this screenshot http://image.noelshack.com/fichiers/2016/51/1482494034-capture-d-ecran-2016-12-23-a-12-51-02-copie.png

3- On mobile, on product page, the tabs are not displaying, we would like to have “retractable section” clicking on tab’s title as on your demo…

Thanks for your help :)

Alex 24 Dec 2016, 12:26

Hi. I think you are right regarding the Respondivenes. I will check and prepare the fix soon.
If you want you can fix it yourself:
in all files \themes\venedor\css\
responsive-all-mobile-devices.css
responsive-phone-landscape.css
responsive-phone-portrait.css
responsive-tables.css
responsive-tablet-landscape.css
responsive-tablet-portrait.css

the value width the @media

max-width: 767px

change to

max-width: 768px

and min-width: 768px to min-width: 769px

and of course change it in the CustomCSS
and of course don’t forget to backup the files before any changes ;)

2) Yes I can do that for 10 euro. http://promokit.eu/themes/custom-package/
3) I will check and write you back

Pierre GUERIN 27 Dec 2016, 13:03

Hi,

1) It still doesn’t work :/ First, I did what you told, then when I saw it didn’t work I tried to do the same in modules/pk_flexmenu/css/pk_flexmenu_responsive.css too, but it’s the same… http://image.noelshack.com/fichiers/2016/52/1482840197-capture-d-ecran-2016-12-27-a-13-02-54.png So I undo what I did because for menu it was worst.

2) Ok thanks, my first screenshot was not exactly what we want, we would prefer like this → http://image.noelshack.com/fichiers/2016/52/1482840014-maquette-panier.png

We want it as big as possible to be visible. After you do the modifications, can we still modify it in custom CSS, just in case ;) ?

3) Ok thanks very much

Alex 28 Dec 2016, 15:52

Hi.
1) As I see only chnage in one place moves the menu in the top and it looks ok http://screencast.com/t/keV2BxRZ34 in the file /modules/pk_themesettings/css/presets/preset7.css line 320
change 768 to 769

2) It’s only CustomCSS modification :)
http://screencast.com/t/IfZATUhZ

Add this code to the CustomCSS

.preset7 #page .shopping_cart > a .info-section {display:block; position:absolute}
.preset7 #page .shopping_cart > a .info-section span:not(.ajax_cart_quantity) {display:none}
.preset7 #page .shopping_cart > a .ajax_cart_quantity {
    position: absolute;
    top: -27px;
    left: 26px;
    background-color:#00BCD4;
    width:20px;
    height:20px;
    border-radius:15px;
    line-height:20px;
    text-align:center;
    font-size:12px
}

You can pay here http://promokit.eu/themes/custom-package/

3) Add this CustomCSS. It should help

@media (max-width: 768px) {
    #page #category_description_short, .sections-titles {
        display: block;
        width:100%
    }
    #page .sections-bodies {clear:left}
    #page .sections-bodies .page-product-heading {display:none}
}


Pierre GUERIN 28 Dec 2016, 17:18

Hi,

1) Ok, I did the modifications, and let them in case you want to see it, it’s almost good, there is always a blank space instead of the left column as you can see on this screenshot http://image.noelshack.com/fichiers/2016/52/1482937816-capture-d-ecran-2016-12-28-a-16-09-47.png . I would like it to appear as 767px: like this → http://image.noelshack.com/fichiers/2016/52/1482938267-capture-d-ecran-2016-12-28-a-16-17-28.png Also, when we click on menu, it doesn’t display, instead of at 767px, it works fine… Moreover, I think you can see it on both screenshot, the page exceeds a little bit of the screen. How can I fix it?

2) Thanks :D For payment, you told me 10€ but when I click on your link I see 5€, is that normal?

3) Thanks, it works, but when we display the page at first, all sections are in succession whereas when we click on one of the sections, only the chosen section is displayed, which is better. Is there a way to change it so that when you display the page at first, only the first section is displayed? (I’m not speaking about the titles of sections (which are perfect like this) but the sections themselves. I don’t know if I’m very clear…)

Thanks for all your help :)

Pierre GUERIN 28 Dec 2016, 18:22

1) I found the solution with CustomCSS doing this

@media (max-width: 768px){
#category .columns-container #columns.left_column .col-sm-9 {
    width: 100%;
}
}

But if you have a better solution I would want to know, because I don’t think my solution is the best…

Moreover the arrow to display the left column doesn’t appear ?

Alex 29 Dec 2016, 21:01

Hi.
1)
I found the solution… But if you have a better solution I would want to know It’s ok :)
Moreover the arrow to display the left column doesn’t appear ? Give me please the link to the page from the screenshot
2) you should add 5 euro twice :) 5+5=10
3) now it should be ok. Please check

Pierre GUERIN 30 Dec 2016, 10:11

1) http://www.noova.co/fr/3-tout
It’s the page from the screenshot.
And we can’t “open the menu” on all pages at 768px while it works fine at 767px :/ I tried to see why by comparing the code of 767 and 768 but I don’t see where the problem comes from.

2) Ok :) Payment is done, order #6997 ;)

3) It’s perfect ! Thank you very much :)

Alex 02 Jan 2017, 08:57

Hi.
Arrow left column. Please try to add this code to the CustomCSS

@media (max-width: 768px) {#left_column {right: -25%}}

Flex Menu click. I’ve found the bug. File modules/pk_flexmenu/js/pk_flexmenu.js changed 768 to 769 in 2 places and 767 to 768 ;)

Pierre GUERIN 02 Jan 2017, 12:26

Thanks, it works fine :)

We have another issue, I don’t know if you can do anything. We have https issues, it changes design as you can see on these screenshots http://image.noelshack.com/fichiers/2017/01/1483355953-capture-d-ecran-2017-01-02-a-12-16-33.png vs http://image.noelshack.com/fichiers/2017/01/1483355953-capture-d-ecran-2017-01-02-a-12-15-57.png

http://image.noelshack.com/fichiers/2017/01/1483355951-capture-d-ecran-2017-01-02-a-12-18-47.png vs http://image.noelshack.com/fichiers/2017/01/1483355951-capture-d-ecran-2017-01-02-a-12-16-58.png

But what’s really annoying is that on mobile device, when we are in https we can’t click on flex menu or arrow for left column or on the logo to go on home page…

Our module of cache tell us there was issue from the theme, and send us this screenshot : http://image.noelshack.com/fichiers/2017/01/1483356333-image.png

Alex 02 Jan 2017, 17:31

Your site has a lot of modifications so unfortunately I can’t tell you for sure where comes this issue. I don’t remember such issues with our clean theme. But Also I can’t tell you for 100% that is not our theme fault. :) We will try to check that within a few days on our clean theme and write you back.

Pierre GUERIN 05 Jan 2017, 12:17

OK thanks.

Thanks for all your help :)

Pierre GUERIN 06 Jan 2017, 11:43

Hi,

I have another issue, with blockviewed module. I try to put 5 products, but it always come back to 4. It works a few minutes, and then it come back automatically to 4. I don’t understand why. http://image.noelshack.com/fichiers/2017/01/1483699385-capture-d-ecran-2017-01-06-a-11-42-48.png Do you know how to fix it?

Thanks :)

Alex 07 Jan 2017, 13:33

Try to RESET the module. It can help ;)

Pierre GUERIN 09 Jan 2017, 19:26

Hi,

I reset the module, the number by default was 2, I put 5, it stay a few minutes, and come back to 4 after :(

Alex 12 Jan 2017, 22:03

Hi. Yes I see the issue with the blockviewed. But unfortunately I can’t tell you what’s exactly wrong. This is Prestashop module. Try to find the solution in the PS forum