• 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 love creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create digital products at SimpleProThemes(.com) and digital solutions at iGuiding(.com)

    2 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? http://woocommerce-29868-73693-201972.cloudwaysapps.com/

      • 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.

    Leave a Comment





  • Pro Stuff

    for  Beaver Builder

    Pro Styles for Beaver

    Customize Beaver Builder Modules beautifully with pre-made CSS packs

    Creative9

    A premium modern agency template for Beaver Builder users