You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Online

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

#113509 Problem displaying a popup in the horizontal position of an iphone

Posted in ‘Mediabox’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by LECLERC Bernard on Monday, 10 April 2023 11:21 BST

LECLERC Bernard
Here is my problem, I use the mediabox popups, the display of photos on the iphone in vertical position is perfect, however in horizontal position, the photo is displayed full screen for a fraction of a second and it becomes very small .
In a previous message, addressed to the forum I thought it came from the numbers corresponding to several photos of the same group, Ryan had given me the solution to remove the numbers, thank you again the solution works perfectly, unfortunately even without the number image is not full screen in horizontal position, on the other hand as can be seen on the attached images, the figures, the title or the legend are positioned vertically in horizontal position.
Is there a solution, maybe I didn't make a necessary setting. I tried to enter different height and width values in the mediabox settings but no change, I downloaded version 2.1.3 RC3, no better!
If you have a solution...

Attachments

Ryan
Please post a link to an example popup on your site.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Ryan
The problem here is caused by the number display, which wraps causing the whole popup box to be resized, making the image smaller. We can improve this slightly with some css, but there is always going to be a problem display portrait images in landscape mode on a small screen, especially if the popup contains a text description and multiple images with number navigation, as on your site. Add the following css to your template stylesheet:

.wf-mediabox-theme-shadow .wf-mediabox-numbers {
  display: flex;
  margin: 0;
}

.wf-mediabox-theme-shadow .wf-mediabox-numbers ol {
    text-align: left;
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

LECLERC Bernard
Thank you very much Ryan for taking the time to help me I will test this solution, it must be said in your defense that my iphone to test is particularly small (SE), the ideal would be that there is in a future updated an option to click to have a fullscreen mode by removing caption title and number.
Good day to you