Topic: ithemes builder and juicebox

I have extensive juicebox galleries throughout this site, and I have never had a problem with mobile before now:

https://gateslosangeles.com

But now I am having a problem with it.

Here is one of the pages with a juicebox gallery in it: https://gateslosangeles.com/gates-and-f … gates.html

In mobile, everything stays responsive and looks fine until I get to a page that has a juicebox gallery on it. When I do that, it flips to the full page desktop version of the site. As soon as I go away to another page that does not have a juicebox gallery in it, then it goes back to responsive mode again.

I have not added any new plugins to the site. I updated everything and it still is happening.

It does not happen when I reduce these pages in my notebook down to smartphone dimensions. Everything adjusts well when I do that. It only happens on mobile and it happens on Androids and iPhones.

Dan

Re: ithemes builder and juicebox

I notice that your galleries currently use Juicebox-Pro v1.4.0.
Please try upgrading them to the latest version (v1.5.0) to see if this helps. There have been 7 releases since v1.4.0 fixing many bugs so upgrading might fix your problem without any further action. Please see the Version History for a list of changes between versions.
You can download the latest version using the link from your purchase email (the link always points towards the latest version rather than the version you purchased). If you cannot find your purchase email or your link has expired, then please fill in the Download Link Request Form and the admin team will send you a new link. (Full details for upgrading can be found here.)
Once you've downloaded Juicebox-Pro v1.5.0, just replace the 'jbcore' folder in your WP-Juicebox plugin with the version from the Juicebox-Pro v1.5.0 zip package ('juicebox_pro_1.5.0/web/jbcore/') following the instructions here.

If this does not help, then try fixing the HTML errors on your web pages.
You can check the code on your web pages using the W3C Markup Validation Service. Some browsers may be more or less tolerant towards HTML errors than other and once the code on your pages validates correctly, your pages should be rendered with greater predictability and consistency across different browsers.

I hope this helps.

Re: ithemes builder and juicebox

Thank you for your reply.

I cloned the site and put it here to work with it. Here it is: http://dev.mulhollandgates.com/gates-an … lass-gates

I followed your instructions exactly and uploaded the jbcore folder successfully. I cleared the cache on my phone and got the same behavior. I turned off all the plugins, including juicebox, and I got the proper behavior responsively, and the WRC link returned no errors.

I then activated the updated juicebox, in doing so the responsive feature no longer worked in mobile.

I used the W3Service and got this back as the only error:

Error: No p element in scope but a p end tag seen.
From line 387, column 235; to line 387, column 238
st&#8221;]</p>↩<h3>O

Screenshot here. https://www.screencast.com/t/OMXTijn03lOt

Now, there are LOTS of other errors when I activate other plugins. And there is lots of work to be done (I don't know what to do with most of it, but, that's something I will work with others to figure out.)

But I thought that we could start with this situation. Can you tell me what to do about this one error that the markup validation service located, that in and of itself seems to be enough to cause the page not to load properly in mobile?

Thank you!

Dan

Re: ithemes builder and juicebox

Please note that the only plugs that I have active are juicebox plug in and a plugin that adds .html to the pages. I kept this on as there are some navigation thumbs that are linked to pages with that extension. I tried it without that plug in and there is still the same problem.

So this is the link to consider as a demo of what is going on throughout the site, wherever there is a juicebox gallery: http://dev.mulhollandgates.com/gates-an … gates.html

Re: ithemes builder and juicebox

It seems strange that activating WP-Juicebox would prevent your web site from triggering its mobile mode.
Usually, factors such as the device (browser user agent), screen size and screen resolution will be taken into account when deciding whether to use desktop vs mobile mode but, from what you say, your theme's logic seems to also be considering page content. Maybe your theme's author can help determine why your mobile mode is not being used when WP-Juicebox is active. Other than loading the 'juicebox.js' JavaScript file and having a <script> tag with the gallery's embedding code, all that WP-Juicebox inserts into the web page is a <div> container for the gallery.

Checking out your website in Mobile Safari (iOS 10.3.1), the big difference between gallery pages and other pages seems to be that most gallery pages have large text at the top (above the header) such as "North Hollywood, Malibu, CA: Iron Gates in Los Angeles" in the link you provided. It seems to be this text that is not being resized appropriately. The rest of the web page seems to be responsive (the header fits the width of the web page and the navigation menu is hidden under the icon).
It might just be that your theme is not taking this text into account when resizing content for mobile devices.

The "Error: No p element in scope but a p end tag seen." validation message seems to be coming from the following two sections of code surrounding the gallery's embedding code.

<p>[vc_row el_position=&#8221;first last&#8221;][vc_column][vc_tabs interval=&#8221;0&#8243; el_position=&#8221;first last&#8221;][vc_tab title=&#8221;Pictures&#8221; tab_id=&#8221;1357613662131-6-0&#8243;][vc_column_text]
[/vc_column_text][vc_column_text el_position=&#8221;first last&#8221;][/vc_column_text][/vc_tab][vc_tab title=&#8221;Glass Information&#8221; tab_id=&#8221;1368221702106-4-9&#8243;][vc_column_text el_position=&#8221;first last&#8221;]</p>

If you view the source of your web page in your browser, you'll see this code surrounding the gallery's embedding code.
The plugin only inserts the code between <!--START JUICEBOX EMBED--> and <!--END JUICEBOX EMBED-->. The code I posted above (including the <p> and </p> tags) are not inserted by WP-Juicebox.

WordPress can sometimes insert unwanted <p> (and <br />) tags but usually only when you enter HTML code directly into the WordPress editor (in 'Text' mode). (Maybe you've got some code other than the WP-Juicebox gallery shortcode in your editor.) This is usually due to WordPress's wpautop function.

You could try installing a third-party plugin to disable the wpautop functionality, for example Toggle wpautop or wpautop control.
Otherwise, you could perhaps implement the manual solution from this forum thread.

Alternatively, you could try installing the Raw HTML plugin and wrap any HTML code that you have in the WordPress editor in [raw] ... [/raw] tags. This should prevent extra markup (such as <p> and <br /> tags) from being added to the HTML code by WordPress itself or any third-party theme or plugins.

This might help with the <p> </p> tags but I do not know where the [vc_*] tags are coming from. They look like unprocessed shortcode tags (but I do not know their origin).

Incidentally, it looks like your theme's custom CSS is affecting the layout of your WP-Juicebox galleries.
When I view a gallery on a mobile device, the Splash Page image is offset (to the top left). This is more than likely to be due to some CSS which is being applied to all images on your web page (including those in your gallery).
Specifically, on line 1 of your 57901af0a3c58.css file, there is the following code:

img, video, .wp-caption {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
    height: auto !important;
}

These CSS rules are being applied to all images (<img> tags) on your web page and the WP-Juicebox gallery has no option but to inherit them. Ideally, those CSS rules should be applied to only those elements on your web page which require them through use of CSS selectors (classes or ids).

I hope these notes point you in the right direction.

6 (edited by charmedlife 2017-05-12 00:16:32)

Re: ithemes builder and juicebox

http://dev.mulhollandgates.com/gates-an … lass-gates

Ok, this page now has absolutely 0 errors as viewed through the markup website; all of the other plugins have been deactivated, and it is still giving me the full desk top version when I go to any page with juicebox.

But, the owner of the site (in California) using the same phone, in the same browser, says "no problem". He says it's my phone.

My phone seems to be working perfectly. It is an iphone 6c, never dropped, everything works fine. . I am in South America. I did not think that could be a factor tho. Any more ideas?

Dan

Re: ithemes builder and juicebox

Fascinating! I decided to just work with the settings on my iphone rather than keep looking through the site. In Chrome, I have the problem that we have been talking about, but, when I click on "Request Desktop site", I get the mobile, rendering perfectly! What?
I have cleared the cache on my phone (over and over again). Any ideas what to do?

Re: ithemes builder and juicebox

Please try implementing the solution noted in this FAQ:
Why can't I view my gallery on a 3G mobile connection?

It's the first thing I thought of when you mentioned "Request desktop site". I hope it helps.

As I mentioned in my last post, the only thing that looks a little out of place to me when I view your gallery's web page on my own iOS device (using Wi-Fi) is the large text above the header. Everything else looks OK.

If this still does not help, then please let me know if you see the same problem in both Chrome and Mobile Safari (and possibly Firefox if you have it installed, too).

Also, it might help if you could provide a couple of screenshots (you can attach them to a post here or upload them elsewhere and provide links) to let me see what you see on a gallery page compared with what you expect to see (on a non-gallery page). Thank you.

Hopefully the solution in the FAQ above (to prevent content modification over 3G/4G) will work, though.
It certainly sounds like it might.

9 (edited by charmedlife 2017-05-13 00:19:37)

Re: ithemes builder and juicebox

Thanks!

Would you be so kind as to tell me where to insert that code in the .htaccess ? I have tried different places, all ow which brought me an internal server error. Here is my current file:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

</IfModule>

# END WordPress

  

HERE IS WHAT I CHANGED IT TO - THE SITE WORKS, BUT IT STILL DOES NOT SHOW UP IN CHROME IPHONE 6 UNLESS CHOSE "REQUEST DESKTOP VERSION"


# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

<IfModule mod_headers.c>
Header set Cache-Control "no-transform"
</IfModule>

# END WordPress

Re: ithemes builder and juicebox

Placing the code from the FAQ at the end of your .htaccess file (as you have done) is fine. (Anywhere outside the existing <IfModule mod_rewrite.c> ... </IfModule> section is fine.)

The layout of your web page is controlled via CSS and I expect there are likely going to be media queries and screen width breakpoints (and perhaps even some JavaScript code to determine whether or not the mobile layout will be used). Being that I am not familiar with the code or internal workings of your current theme, troubleshooting is quite difficult.

If it were my own site, I'd probably try using a different theme (at least for testing purposes) to see how things look on mobile versus desktop. Maybe try one of the default themes (such as Twenty Sixteen or Twenty Seventeen) to see how you get on.

I'm pretty sure that the answer lies somewhere within your current theme's code but without knowledge of exactly how your theme works (and decides to lay out your web page), I cannot answer the question of why the presence of a Juicebox gallery on your web page changes your web page's layout on mobile devices.

Knowing that CSS is probably somehow involved, you might also like to try changing your gallery's width from 100% to a fixed pixel value (such as 800px). I realise that this is not a long term solution to the problem (it'll mean that your gallery is no longer responsive in the horizontal dimension) but it might give you some insight into the nature of the problem. Giving a gallery a width of 100% means that it will fill the width of its parent container. However, its actual width (in pixels) might somehow be calculated incorrectly and seen by your theme as being large enough to warrant using the desktop layout. Using a fixed pixel value for your gallery's width might make a difference. It's a long shot but something I'd try for myself just out of curiosity. (I'm really just thinking out loud at this stage.)

Unfortunately, without knowing exactly what is causing the problem, trial and error seems to be the way forward.
I would certainly try a few different themes (to see if the answer lies somewhere within your current theme's code) and some fixed width galleries (maybe try a few different fixed widths) so see what happens.

I hope this at least points you in the right direction.

Edit:
I've just taken a look at the headers for your websites.
The 'no-transform' Cache-Control header is correctly set up and active on your http://dev.mulhollandgates.com/ website but not currently on your http://gateslosangeles.com/ website.

Also, I notice that WP-Juicebox in both of your websites still uses Juicebox-Pro v1.4.0.
I would strongly encourage you to upgrade your galleries to v1.5.0 (see details in my first post above).
I still think that this might help with your problem.

Re: ithemes builder and juicebox

In regards to v. 1.50 (now v.151), I updated FZ and now it will only over write items in the top-tier of the directory when I bring a folder over. It does work if I go sub folder by sub folder tho, and I just did that for the second time. I am 99.99% sure that I got them all this time. The plugin dash board says that I am updated to 1.51. (and it still is behaving this way.)


I will go through all the other advice you have given and try. It has worked with this theme before though. Thanks for sticking with me.

Dan

Re: ithemes builder and juicebox

I updated FZ and now it will only over write items in the top-tier of the directory when I bring a folder over.

I'm not aware of a setting in Filezilla that uploads (and overwrites if required) only the top level folder contents.
Try changing the 'Uploads' option in Filezilla -> Edit -> Settings -> Transfers -> File exists action' to 'Overwrite file' (at least while you upload the Juicebox-Pro v1.5.0 'jbcore' folder). This should force all existing files to be overwritten. You can change this value back in the Filezilla interface afterwards.

The plugin dash board says that I am updated to 1.51.

Just to clarify, the 'Plugins' page displays the version number of WP-Juicebox (the plugin itself). The 'Plugins' page does not know what version of the 'jbcore' folder you are using.

Re: ithemes builder and juicebox

I know that this is an ancient thread but I thought I would try picking it up again. I have do doubt that you gave excellent guidance but I was not confident at the time that I could implement your suggestions.

After re-visiting the thread with a clearer mind, I have restudied your remarks and want to try to resolve again. Let's use as an example once again, this page: https://gateslosangeles.com/gates-and-f … gates.html


Steven @ Juicebox mentioned on 2017-05-10 at 05:34:27

It seems strange that activating WP-Juicebox would prevent your web site from triggering its mobile mode.
Usually, factors such as the device (browser user agent), screen size and screen resolution will be taken into account when deciding whether to use desktop vs mobile mode but, from what you say, your theme's logic seems to also be considering page content. Maybe your theme's author can help determine why your mobile mode is not being used when WP-Juicebox is active. Other than loading the 'juicebox.js' JavaScript file and having a <script> tag with the gallery's embedding code, all that WP-Juicebox inserts into the web page is a <div> container for the gallery.
Checking out your website in Mobile Safari (iOS 10.3.1), the big difference between gallery pages and other pages seems to be that most gallery pages have large text at the top (above the header) such as "North Hollywood, Malibu, CA: Iron Gates in Los Angeles" in the link you provided. It seems to be this text that is not being resized appropriately. The rest of the web page seems to be responsive (the header fits the width of the web page and the navigation menu is hidden under the icon).
It might just be that your theme is not taking this text into account when resizing content for mobile devices.

I have found that the source of the text that you say is oversized comes from the site's General Settings > Site Title Can you confirm that is what you see as well or are you seeing something that seems to be from another source?

Re: ithemes builder and juicebox

I have found that the source of the text that you say is oversized comes from the site's General Settings > Site Title Can you confirm that is what you see as well or are you seeing something that seems to be from another source?

Attached to this post is a screenshot of what I see when I visit your web page in Mobile Safari on an iPod Touch 6 running iOS 11.2.
The only large text on my iPod Touch is the "Call Us NOW" text and this is not connected to the gallery and its size should not be related to whether or not WP-Juicebox is active.

Here are some observations on your web page which might help to solve some problems.

(1) When I check the code on your web page with the W3C Markup Validation Service , many HTML errors are reported. A lot of these errors are likely to be related to your current theme so it might be difficult to fix them but they should be fixed. HTML errors (such as stray or missing tags) can cause layout problems and some browsers may be more tolerant towards HTML errors than others, resulting in inconsistent results across different platforms.

(2) Your Juicebox gallery's JavaScript and CSS files have been modified. At the very least, the comments have been removed from the top of the files (and the CSS file looks to have been minified). Because of this, I cannot check the versions of the files being used or their integrity. If you have any plugins installed which modify JavaScript and CSS files, I would recommend making exclusions for your gallery's 'juicebox.js' and 'theme.css' files. It would be wise to leave your gallery's 'jbcore' folder intact (especially whilst troubleshooting problems).

(3) The icons on your gallery's Button Bar and the Splash Page image in Small Screen Mode are offset. This is due to custom CSS conflicting with the gallery's own CSS. For example, in your 'style.css' file, you have the following code:

.wpb_wrapper div{border:none!important;padding:0!important;}

These custom CSS rules with !important affect all div containers within the .wpb_wrapper class, including those within your gallery (which affects the layout of elements within the gallery). Juicebox has no option but to inherit such CSS rules. Please check your CSS for any custom rules which might be applied to all div, img or p tags which could potentially interfere with your gallery's layout.

I'm not sure if these notes are highlighting different problems from the large text one you quoted above but resolving them should certainly help and be a few steps in the right direction.

Post's attachments

IMG_0031 (Medium).png
IMG_0031 (Medium).png 220.65 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.