• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 25.03.21, 17:17
  • Opened by: Sylvain Duval
  • Closed by: Anonymous Submitter
  • Closed on:
  • Reason: Not a bug

Ticket #21143 - Lookbook responsive issue

Hello,

I just added a Lookbook on my website https://www2.jouplast.com

But on mobile it doesn’t display well : main image is cut, product images are cut too, and text are on top of each other.

Could you have a look at it please ?

Regards,
Nathalie

Comments

Fred 25 Mar 2021, 22:18

Please try now. The fix is in the Theme Settings → Customer CSS

Sylvain Duval 26 Mar 2021, 09:50

It’s better but still not totally responsive.
Image is not responsive at all : it is not supposed to be cut, its size should adjust to the screen size.

Then see screen shot, there is still a problem on the text.

Thanks

Sylvain Duval 26 Mar 2021, 09:52

Sorry I forgot the screen shot. Here it it.

Sylvain Duval 26 Mar 2021, 09:56

Sorry, image was to big (you should make the message not sendable when attached file is to big).

Attachments:

IMG_0644.jpg (307.8 KiB)
Sylvain Duval 26 Mar 2021, 14:17

Hello,

I tried to add a new lookbook with title and description and now it’s really badly displaying.
Moreover, for my 2nd lookbook pointed element are not displaying at the same place in back office and front office.

Could you have a look at it please ?

Regards

Attachments:

Capture d’écran 2021-03-26 à ... (1.34 MiB)
Fred 26 Mar 2021, 16:05

Please try this

.pk-alt-view .lookbook-item h2,
.pk-alt-view .caption div {
    display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;max-width: 100%;
}
.pk-alt-view .lookbook-item {
    overflow:hidden
}
Sylvain Duval 30 Mar 2021, 09:48

Hello,

Now that I’ve added title dans description, it’s still not displaying well.

Regards

Attachments:

Capture d’écran 2021-03-30 à ... (1.35 MiB)
Fred 30 Mar 2021, 10:43

I don’t see the issue. it looks fine for me https://take.ms/yBxL6

Sylvain Duval 30 Mar 2021, 10:55

Have a better look.
It’s not displaying well, see comment on your screenshot joined.

Attachments:

scr_20210330_104312.png (1.78 MiB)
Fred 30 Mar 2021, 13:05

try to move that product to the right

@media (min-width:767px)
{
  .pk-alt-view .lookbook-products-list > .product-miniature:nth-child(2) {
    left: 0;
  }
}
Sylvain Duval 31 Mar 2021, 10:44

Its not working.

There are huge issue with your Lookbook, nothing is displaying well.
1. Backoffice and front office are not displaying same points places (see screenshot)
2. Description dans title are cut on home page, but nothing indicate le visitor that he can see the rest of the infos. Is it possible to make the description fully display ? (see screenshot)
3. In lookbook page, there are points in the middle of my descriptions. (see screenshot)
4. Lookbook page display way better, would it be possible to display it the same way but in a slider ?

Regards

Attachments:

Lookbook Issue JOUPLAST.zip (530.6 KiB)
Fred 31 Mar 2021, 11:50

I need access to your server through FTP

Sylvain Duval 31 Mar 2021, 14:59

I added infos on my profile.
Thanks

Fred 01 Apr 2021, 11:10

The issue has been fixed. Please test to confirm the change

Sylvain Duval 01 Apr 2021, 14:04

Thanks, that’s way better !

Last questions :
1. could you, on home page, make the same shadow behind the product on hover (like on the lookbook page).
2. Backoffice : could you sort A to Z the product list.

Attachments:

1.-Shadow.jpg (474.1 KiB)
2.-A-to-Z.jpg (598.1 KiB)
Fred 01 Apr 2021, 23:17

1. Fixed.
2. We will prepare it in the next update

Sylvain Duval 02 Apr 2021, 13:54

Ok thanks !

Desktop display works fine, but it’s still not ok on mobile (see screenshot).
Could you have a look at it please ?

Attachments:

IMG_0677.jpg (400.6 KiB)
Fred 02 Apr 2021, 19:30
Sylvain Duval 06 Apr 2021, 09:13

hello,

On my iPhone using Safari, it’s still displaying badly (see screenshot).

Attachments:

IMG_0685.jpg (352.5 KiB)
Fred 06 Apr 2021, 11:15

Looks like a cache because all looks fine on my phone https://take.ms/HtNa8