• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Alex
  • Private: No
  • Open Date: 19.02.16, 15:24
  • Opened by: caroline
  • Closed by: Kate Support
  • Closed on: 23.02.16, 08:52
  • Reason: Closed
  • Comment: Reason for request: Thank you so much it looks lovely :)

Ticket #9209 - Pk_Features bugg css :(

Hello, I added the pk_features module in my home page.

Unfortunately the background image is difficult to change, i manage with filezilla to replace it but it don’t fit like the other (have you an idea, is there a dimension problem) I’ll be more easy to change from the BO. Secondly the <li> length depends to the text so it’s ugly (not aligned)… Last but not least the logo images (img-wrapper main_bg) is jpg so not transparent and the size is smaller than the circle.

See pic attached.

Thank for u help, Caroline.

Comments

Kate Support 19 Feb 2016, 16:07

Hi,
1) This is not module bug. To use png images in Prestashop you need to enable this option in Preferences > Images http://c2n.me/3uylzMz
2) You can set the minimal height to your <li> items with this code if you find it more suitable 

#pk_features li {min-height:365px}

3) We recommend to upload background image 1920x1200px to avoid dimension problems

Regards

caroline 19 Feb 2016, 17:02

1) So this is good ?

2) If i do so, in small display it will be enormous unfortunately (tried)

3) thanks i’ll try with this

Kate Support 19 Feb 2016, 17:45

1) What do you mean? If you enable this option you can use png images in your store
2) That’s why the module <li> by default depends on the text length. This allows to fit the responsive screens. You can use either equal text length for all the items or add <br> to achieve the same length.

caroline 22 Feb 2016, 14:17

1) It is unfortunately impossible to integrate <br> or any html :( maybe we have to change it not through the BO but, how ?

All the other issues are fixed, thanks Kate.

Waiting for your response.

Caroline.

Kate Support 22 Feb 2016, 15:33

Hi,
in this case try to use this code

@media (min-width:1200px) {
#pk_features li span {min-height:140px}
}
@media (max-width:1199px) and (min-width:980px) {
#pk_features li span {min-height:200px}
#pk_features li h5 {font-size:15px}
}
@media (max-width:979px) and (min-width:728px) {
#pk_features li h5 {min-height:40px}
}

It allows to set minimal <li> height for different responsive screens. So it will not look enormous on tablet screen.