Understanding image sizes

Hi there,
I’m confused about how image sizes work in BeaverBuilder. There’s no place to edit the size of a photo module and using CSS to adjust the size is hampered by the BeaverBuilder CSS rule:

.fl-photo-content img {
    display: inline;
    height: auto !important;
    max-width: 100%;
    width: auto !important;

The above contains !important flags for width and height forcing me to do the same for my CSS which, as you know, is bad practice.

For context, I want to insert full size photos and then adjust the width to be 50% of the width of the original for retina display. I’ve taken a look at WP Retina 2x but it seems to be a much bigger hammer than I need and also requires the pro version to work on full size images. I really just want to upload, say, a 1600px image and then set it to be 800px. Am I going about this the wrong way?

UPDATE: Am I correct in the realization that I should be setting the width with max-width instead of width so the images will shrink even smaller on smaller displays?

UPDATE 2: max-width is no good since it overrides max-width 100% and breaks responsiveness. Original question remains :slight_smile:

UPDATE 3: looks like setting the width on the fl-photo-content container element is the best way…perhaps?

Hi Yaron,
Just in case, this is of interest to me, so bumping it so it does not get missed.
Cheers, Dave

Hey Yaron,

Have you tried placing the 1600px image inside a 800px container? Do you think you can share the URL of the page you’re playing around with so we can check?


Setting the size of the container is what I did in update #3 and that seems to work. Is this the right approach? I used it on the new homepage at www.crypteron.com on the width of the monitor and embedded video preview. Any plans on exposing this kind of functionality in the UI for the photo module so I don’t have to write custom CSS every time I insert a photo onto a page?

Hey Yaron,

That’s about the only method I know to force a large image to be resized. If you’ve a minute, feel free to add that as a feature request on our User Voice!

Usually, I just recommend using the WP Retina 2X plugin. :slight_smile:


Hi Ben,
Got it. The method appears to be working. I looked into WP Retina 2X and it doesn’t address the use case I’m describing. I’m just trying to resize an image on my page which, apparently, you can only do with custom CSS on the container element. At the very least this should be documented somewhere though I think it warrants a UI function as well. I’ll post both to User Voice. Thanks for your help!

No worries at all, Yaron! And thanks for the suggestion. Enjoy! :slight_smile: