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.

1 Attachment

Type: Pre-Sale
Status: Resolved
View Replies:
jb1 replied on at Permalink Reply
Hi Ben,
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: (mobile sized) (desktop sized)

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.

fridayphoto replied on at Permalink Reply 1 Attachment
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?

jb1 replied on at Permalink Reply
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:

I've tested this approach and here's the CSS code you need to add to your theme:

@media (max-width: 767.98px) {
      width: 98% !important;
      margin: 0 auto !important;
       left: 0 !important;
       right: 0 !important;
      width: 98% !important;
   div.pp_default .pp_content{
      width: 99.5% !important;
   .pp_hoverContainer {
      width: 100% !important;

And here's 2 screenshots of when I apply this to the Greek Yogurt theme:
Desktop size:
Mobile size:

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.

fridayphoto replied on at Permalink Reply
It helps very much! Thank you!

concrete5 Environment Information

# concrete5 Version

# concrete5 Packages
Popup Pro (1.6.8), Skyline (0.9.6), The Void theme (1.1).

# concrete5 Overrides
blocks/page_list, blocks/next_previous, blocks/laywer_home_layout, languages/sv_SE, languages/es_PE, languages/pt_BR, languages/nl_NL, languages/fr_FR, languages/nb_NO, languages/es_AR, languages/pl_PL, languages/cs_CZ, languages/es_ES, languages/ro_RO, languages/tr_TR, languages/fa_IR, languages/vi_VN, languages/sl_SI, languages/ja_JP, languages/fi_FI, languages/da_DK, languages/it_IT, languages/zh_TW, languages/ar, languages/es_MX, languages/pt_PT, languages/el_GR, languages/sk_SK, languages/ru_RU, languages/de_DE

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off

# Server Software

# Server API

# PHP Version

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dba, dom, enchant, ereg, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imagick, imap, intl, ionCube Loader, json, ldap, libxml, mbstring, mcrypt, mhash, mysql, mysqli, mysqlnd, odbc, openssl, pcntl, pcre, PDO, pdo_mysql, PDO_ODBC, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, readline, Reflection, session, shmop, SimpleXML, snmp, soap, sockets, SourceGuardian, SPL, sqlite3, standard, sysvmsg, sysvsem, sysvshm, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend Guard Loader, Zend OPcache, zip, zlib.

# PHP Settings
max_execution_time - 3600
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 1800
max_input_vars - 5000
memory_limit - 256M
post_max_size - 200M
sql.safe_mode - Off
upload_max_filesize - 600M
ldap.max_links - Unlimited
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
odbc.max_links - Unlimited
odbc.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - nocache
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
opcache.max_accelerated_files - 2000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5
zend_optimizerplus.max_accelerated_files - 2000
zend_optimizerplus.max_file_size - 0
zend_optimizerplus.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.