Configuring dimensions for mobile display
Permalink Browser Info Environment
Hello, thank you for the excellent popup. I have it working properly for desktops but it's sized a bit small for mobile. Is there a way to adjust this? I see the 'full size' icon but that makes it wider than the browser, and doesn't help much.
| Type: | Pre-Sale |
|---|---|
| Status: | Resolved |
Hello, thank you for the suggestion but setting 95% width means that will look poorly on desktop displays. I have it set to 600px and this is how I want it to display on desktop/laptop. Is there a CSS based solution to my issue?
Attached is another screenshot. Looks like the popup is 240px - which is 60% of the 400px screen width. I assume this 240 is generated by JQuery somehow?
Cheers!
Attached is another screenshot. Looks like the popup is 240px - which is 60% of the 400px screen width. I assume this 240 is generated by JQuery somehow?
Cheers!
Hi Ben,
Ah, I see what you're describing. The short version to the answer is this script was built many years ago, before responsive design became a mainstream practice. I just checked and the underlying jQuery library hasn't really been updated since Popup Pro was released, so there's no 1-line quick fix in terms of adding mobile support unfortunately.
I looked at the CSS code and it is possible to do some overrides and use the media selector to scale the content. This would be the best bet without modifying the add-on, but there would be a few lines to add - and it's important to note that if the popup block is used elsewhere this approach could have undesired consequences (ie. resizing all popups everywhere).
In case you're not familiar with media queries, this explains more:
https://css-tricks.com/snippets/css/media-queries-for-standard-devic...
I've tested this approach and here's the CSS code you need to add to your theme:
And here's 2 screenshots of when I apply this to the Greek Yogurt theme:
Desktop size:http://snpy.in/a1j9Xj
Mobile size:http://snpy.in/7yzyKW
This will kick in at the breakpoint of 767px wide (for the browser window). After you've tried added this code, resize the browser window and you'll see the impact.
An alternative approach - as for modifying the jQuery library, this would be possible. In jquery.prettyPhoto.js on line 583 you'll find the "_fitToViewport" function. This is responsible for changing the size of the popup based on the viewport size (browser window size). Inside this is a while loop starting with:
Looking at it now in 2020, it's hardly the optimal way of sizing a popup. And if you're familiar with jQuery it is possible to do a mobile detection here and use a different calculation for mobile vs desktop browsers.
I'd suggest going ahead with the first approach (using CSS), and that should do the job you need for this project.
Hope this helps.
JB
Ah, I see what you're describing. The short version to the answer is this script was built many years ago, before responsive design became a mainstream practice. I just checked and the underlying jQuery library hasn't really been updated since Popup Pro was released, so there's no 1-line quick fix in terms of adding mobile support unfortunately.
I looked at the CSS code and it is possible to do some overrides and use the media selector to scale the content. This would be the best bet without modifying the add-on, but there would be a few lines to add - and it's important to note that if the popup block is used elsewhere this approach could have undesired consequences (ie. resizing all popups everywhere).
In case you're not familiar with media queries, this explains more:
https://css-tricks.com/snippets/css/media-queries-for-standard-devic...
I've tested this approach and here's the CSS code you need to add to your theme:
@media (max-width: 767.98px) { div.pp_pic_holder{ width: 98% !important; margin: 0 auto !important; left: 0 !important; right: 0 !important; } div.ppt{ width: 98% !important; } div.pp_default .pp_content{ width: 99.5% !important; } .pp_hoverContainer { width: 100% !important;
Viewing 15 lines of 26 lines. View entire code block.
And here's 2 screenshots of when I apply this to the Greek Yogurt theme:
Desktop size:http://snpy.in/a1j9Xj
Mobile size:http://snpy.in/7yzyKW
This will kick in at the breakpoint of 767px wide (for the browser window). After you've tried added this code, resize the browser window and you'll see the impact.
An alternative approach - as for modifying the jQuery library, this would be possible. In jquery.prettyPhoto.js on line 583 you'll find the "_fitToViewport" function. This is responsible for changing the size of the popup based on the viewport size (browser window size). Inside this is a while loop starting with:
while (!fitting){
Looking at it now in 2020, it's hardly the optimal way of sizing a popup. And if you're familiar with jQuery it is possible to do a mobile detection here and use a different calculation for mobile vs desktop browsers.
I'd suggest going ahead with the first approach (using CSS), and that should do the job you need for this project.
Hope this helps.
JB
It helps very much! Thank you!
It's either that the width hasn't been manually set or something in the theme could be clashing.
Here's a screenshot of what 95% width looks like on the default "Greek Yogurt" theme:
http://snpy.in/BVN1QC (mobile sized)
http://snpy.in/4TBmzu (desktop sized)
Setting:http://snpy.in/I7yqBC
If you have set the width already to 95%, then try temporarily changing the theme for just that page to Greek Yogurt and see if that has the desired effect.
Please let me know how you go.
JB