cjrune

Hi Scott,

Thanks for checking. I am using the theme Kadence and also using the page builder Elementor.

Hi @scottopolis,

I’m having (I believe) is the same problem. No matter which page you visit on my site, the Holler Box will display the current page inside of it (except on the home page where it oddly displays the last post linked on that page). Below all of this, at the very bottom of the Holler Box box, it displays the “Small text above email field” and input field & button, but not the main text message or popup image.

You can see this on my Home Page at cjrune.com

But also check what it does if you go to the Contact Page, for example, at cjrune.com/contact-cj-rune/

Wondering if you can help. I’ve set Holler Box to Notification Box and to display on all pages, to all visitors, show immediately, and on all page loads so, hopefully, you can test it more easily.

Using Holler Box version 1.5.6 and Elementor version 3.1.4.

Thanks!

Themes are intended to create a basic consistency for your site – those things that repeat all throughout; such as headers, footers, sizes and types of fonts, and, especially, keeping the colors of all these things consistent. When it comes to the content that exists between the headers and footers, themes don’t usually control much of that, except for the overall width of that content, the colors and sizes of the fonts used, background colors, etc.

A mobile device downloading a large image is really no different than a desktop doing it though. Not anymore, anyway. This used to be critical.

However, there are still a couple of options:

For one, make sure the image has been compressed using a free service such as TinyPNG. Their system does a great job of reducing file size without loss of quality. Simply compress it at their site before uploading to WP (and if uploading images often, they also offer a free WP plugin to automatically losslessly compress .png and .jpg images as you upload them)

If that’s still not enough, then you can do as stated in the first response and designate a smaller image for mobile devices. I found the easiest way to do this is by using a WSYWIG HTML designer such as Elementor, but you can also code it manually with something like:

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

Most designs simply insert the full-size image into the page and let the code take care of the sizing, such as through the use of a DIV tag. That way, when the available width of the viewing device decreases, so does the image width. It still loads the larger image but shows it smaller.

If you want only a smaller, separate image loaded on mobile browsers, then you would have to insert two separate images, one for large screens and one for mobile, then tell the browsers which one they need to load and show.

If your current theme doesn’t provide this option then you will have to add it (many don’t except perhaps for in the Header and/or Footers).

One easy way to do this is to use a design plugin such as the free Elementor. With it, you can insert an image and then under Advanced options, choose Responsiveness and set it so that the image doesn’t show on Mobile displays. Then add another Mobile-only image and set it in the same way, but so that it doesn’t display on Desktop or Tablet.