• Closed by: Marek
  • Closed on: 08.02.17, 23:39
  • Reason: Closed
  • Comment: Glad to help!

Ticket #10159 - many problem in mobile version: prestashop 1.6.1.6 / Alysum v4.6

in the smartphone mobile:

  1. the products are not displayed correctly. the screen is cut on the right and the title is not readable. (image 1)
  1. horizontal menu > manufacturer (Marche) and other submenu are not displayed clicking “+” (image 2)
  1. Left menu > “lampade moderne” maked with single link is not displayed correctly (image 3 bis)
  1. there are two cart icon (image 4)
  1. in the category page the products are cut on the right and they are not displayed correctly (image 5)

Comments

Alex 18 Jan 2017, 15:38

Hi.
1) Created here a fix  FS#10163  and added in your site in the CustomCSS.

	/* fix for category page */ 
@media(max-width:668px) and (min-width:480px) {
    #category #uniform-selectProductSort {width: 185px !important}
    #category #uniform-selectProductSort span {min-width: 150px !important}
    #category .sortPagiBar #productsSortForm select {width: 100%}
}
@media(max-width:479px) {
  #category .view_list .center_block {width: 269px}
  #category .view_list .product-image-container {
      margin: 0 0 20px 0;
      float: none;
      width: 100%;        
  }
  #category .view_list .right_block {width: 100%}
#category .sortPagiBar #productsSortForm select {width: 100%}
}


2) You enabled it in the Flex menu item> bottom block. By default bottom block is disabled on the portable devices. You can enable it in the main block and it will work great. Or you can add this code and the bottom block will appear

  @media (max-width: 727px) {
    #pattern .flexmenu div.submenu .bottom-section {
        display: block;
        padding: 20px
    }
}

3) Added the fix in your CustomCSS

/* fix for VertFlex*/
@media (max-width: 768px) {
    .v-bottom-section-links > li {
        text-align: left;
        width: 100%;
    }
    .vert-flexmenu .sections-contaier {background-image: none !important;}
    .vert-flexmenu .bottom-title {font-size:16px}
}
@media (max-width: 668px) {
    #pattern .vert-flexmenu .v-flexmenuitem > .submenu .menu-item-title {margin-top: 10px !important;}
}

4) You had the module duplicate in the hook displayTop. I’ve removed it and now only 1 Cart block

5) The same as 1)