1. graustufen
  2. SP Page Builder 3.x
  3. Monday, 13 July 2020
I'm coding a simple website for a customer. I use the SP Page Builder Image Gallery on one site – and now I noticed, that thumbnails are not displayed correctly on mobile in portrait mode: height is to high, so image are no longer proportional… In landscape mode and on other devices, everything works fine. Thumbnail size is set to 400 x 400 px. I think, this is bug. I tried several changes via CSS, but nothing worked.

I can't send you a URL, because site it still in developing mode.

Thanks for help
Alexandra
Accepted Answer
Accepted Answer Pending Moderation
Thank you for your access. Please use this code to Custom CSS.

@media (max-width: 767px)
#sppb-addon-1594213800167 .sppb-gallery img {
width: 300px;
height: 300px;
}


- Best regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # Permalink
Responses (18)
Accepted Answer Pending Moderation
Hello graustufen,
Apology for your issue. You can resize your image to adjust our settings. You can change thumbnail width and height in settings.

- Best regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 1
Accepted Answer Pending Moderation
I think you don't understand my problem: I already set thumbnail width and height in settings – and everything is perfect on laptop, mac and tablet – but not not iPhone in portrait mode: The image is shown to high there, proportions are no longer original.

Alexandra
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 2
Accepted Answer Pending Moderation
I think you don't understand my problem: I already set thumbnail width and height in settings – and everything is perfect on laptop, mac and tablet – but not not iPhone in portrait mode: The image is shown to high there, proportions are no longer original.

Alexandra


okay. Please share a screenshot from iPhone in portrait mode.

- Best regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 3
Accepted Answer Pending Moderation
The website is live now for testing, so you can check it: lauftext.com

Alexandra
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 4
Accepted Answer Pending Moderation
Could you check that? Attached also screenshots: in Safari on Mac – everything ok; in iPhone portrait mode – thumbnail is stretched, lightbox is correct. browser_mac.jpg portrait_mode_lightbox.jpg portrait_mode_thumbnail.jpg
Attachments (3)
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 5
Accepted Answer Pending Moderation
Hi, I'm still waiting for a reply to this bug… Could you please check? Site is no longer life because of that bug, but you can see the problem on the screenshots.

Alexandra
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 6
Accepted Answer Pending Moderation
Please share your administrator access via PM to check. Click on my avatar and send message to PM.

- Best regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 7
Accepted Answer Pending Moderation
I sent you the logins yesterday per PM. I would be glad if you could check this but soon, because the site will go live next week.

Thanks
Alexandra
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 8
Accepted Answer Pending Moderation
I already tried that before – it didn't work and doesn't now…
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 9
Accepted Answer Pending Moderation
Please add !important at the end of the value.

@media (max-width: 767px)
#sppb-addon-1594213800167 .sppb-gallery img {
width: 300px !important;
height: 300px !important;
}


- Best regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 10
Accepted Answer Pending Moderation
I already did that as well – no affect on thumbnail on iPhone in portrait mode.
Attachments (1)
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 11
Accepted Answer Pending Moderation
I would like you to investigate a little more. Please try these codes in Custom CSS.

/* iPhone 2G-4S in portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
#sppb-addon-1594213800167 .sppb-gallery img {
width: 300px !important;
height: 300px !important;
}
}

/* iPhone 5 & 5S in portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
#sppb-addon-1594213800167 .sppb-gallery img {
width: 300px !important;
height: 300px !important;
}
}

/* iPhone 6, 7, & 8 Plus in portrait */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {
#sppb-addon-1594213800167 .sppb-gallery img {
width: 300px !important;
height: 300px !important;
}
}

/* iPhone 6, 7, & 8 in portrait */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
#sppb-addon-1594213800167 .sppb-gallery img {
width: 300px !important;
height: 300px !important;
}
}

/* iPhone X in portrait */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) {
#sppb-addon-1594213800167 .sppb-gallery img {
width: 300px !important;
height: 300px !important;
}
}


- Best regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 12
Accepted Answer Pending Moderation
Thanks; but still the same problem on iPhone 11 Pro…
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 13
Accepted Answer Pending Moderation
Interesting! iPhone 11 Pro has the same viewport as iPhone X and this line of code should work

/* iPhone X in portrait */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) {
#sppb-addon-1594213800167 .sppb-gallery img {
width: 300px !important;
height: 300px !important;
}
}


- Best regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 14
Accepted Answer Pending Moderation
Well – maybe it SHOULD, but it DOESN'T… Any other suggestions?

Alexandra
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 15
Accepted Answer Pending Moderation
Hi there, any other suggestion to avoid this bug?
Alexandra
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 16
Accepted Answer Pending Moderation
I am actually stuck here as you are. I could not find any other solutions for this. Apology!

- Best regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 17


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.