ProBeaver Weekly
Weekly for all things Beaver

Retina image display in photo module of Beaver Builder

On high resolution screens of: mobile, tablet and monitors – images can look blurred ruining the whole visual impact of the layout. Concept of retina image implementation has been there for sometime now. Basically you display image that is double (2x) the size of image area within the layout.

Retina [CSS] solution for Beaver Builder Photo module

1. Add the following CSS code in your style.css file or on a specific page while in the Beaver Builder mode (Tools > Layout CSS).

2. Add Photo module from “Basic Modules” section to your Beaver layout. Upload photo double the size that you want to display. For example, for 300 X 300 photo display, upload image of size 600 X 600 dimensions.

3. Click on “Advanced Settings” tab and retina-image class.

Retina Images in Beaver photo module

Using above method you can selectively make few images look crisp on the retina / high resolution screens. This is ideal for logo images, call to action photos and so on.

More: Retina queries & SVG support

1. Retina Display Media Query – You can fine tune your CSS method by better understanding of media queries break points for retina display screens.

2. Using SVG in WordPress – SVGs are fully scale-able and hence look crisp on retina displays. You can also explore this method for retina implementation.

Davinder Singh Kainth

About Davinder Singh Kainth

Davinder loves creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create products at SimpleProThemes(.com), WordPress learning at BasicWP(.com) & digital solutions at iGuiding(.com)

3 Comments

  1. Clark Marshall on January 19, 2017 at 12:50 am

    Hi Davinder, thanks for this article! I’ve tried using it on this site and it’s displaying the logo at 50% of what it should be, rather than at the correct size. It’s being displayed in a BB template using Beaver Tunnels, and I’m wondering if that’s causing the problem?

    • Davinder Singh Kainth on January 25, 2017 at 5:05 am

      Your logo image is following:
      .fl-photo-content img {
      max-width: 100%;
      }

      Try using max-width: 50% !important; and then check.

  2. Brenen on October 12, 2017 at 3:51 am

    genius solution, bravo!

Leave a Comment





showcase-websites-front-1

Submit Beaver Builder built websites to feature in the "showcase" section on ProBeaver