What are Media Queries in Beaver Builder – and when should you use them?
There are two main reasons you’ll want to add media queries to your Beaver Builder web page…
- You want a great big headline in the hero header section of your page.
- You want to put an image or icon to the left of the headline-AND-text in a call out module.
Both of these scenarios can look great on larger screens but might not work so well on mobiles and small screen sizes.
The examples below show different icon and headline layouts that are each suitable for a different screen size.
Using large icons to the left of the headline-AND-text looks good on large screens
On a medium sized screen I would position the icon to the left of the headline. But now the icon is above the paragraph text.
On smartphones I would remove the icon altogether because there is so little space available
The example below shows the three icon layouts one on top of another
This is the display dialogue box, in the callout module’s advanced settings
The important point is that we can tweak our layouts and make them look good on different device sizes
By choosing from the dropdown list above, you can show or hide each layout you make, on each type of device. The device sizes are Large Device, Medium Device and Small device. A very rough rule of thumb is that iPad in portrait view is a medium device, anything larger than iPad portrait view is a large device and anything smaller than iPad portrait view is a small device.
After you duplicate a module you can change the settings in that specific module’s advanced tab, forcing that specific module to display on all device sizes, or only on…
- Large devices only
- Large & medium devices only
- Medium devices only
- Medium & small devices only
- Small devices only
Modules AND Columns have show and hide settings
Modules and Columns both have these same display and hide settings. Make your changes in the MODULE settings not the column settings. Because the column must always display if you want the content, inside that column, to display.
So one column could potentially contain three separate instances of the same module, with three separate settings, that would each only display on one type of device.
The settings I used in this tutorial
Here’s an example of how I set up a call out module with different settings to suit different devices. I duplicated the Callout Module so I had three versions of it. Then I changed the icon size and icon position to suit different screen sizes.
- Desktop: large icon to left of headline-AND-text.
- iPad: small icon left of headline only.
- Mobiles: no icon, just text.
The reason for the three different settings
On a desktop you have enough room to put a large icon to the left of the headline-AND-text.
But as you reduce the size of the viewport, the large icon takes up most of the room and squeezes the text area so much that you end up with just one or two words on each line.
Having a large icon on desktops, small icon on iPads and no icon on smartphones makes all three layouts look good for their respective users.
Writing your own CSS code media query in this situation would be beyond the ability of most newbies, so these point and click settings are a real bonus to us.
Making great big headlines at the top of your page
The second scenario when we’re likely to need media queries, or these Beaver Builder module show and hide settings is if we want a great big font size for the headline in the main hero header area at the top of our page.
Great big font sizes can look good on desktops and iPads in landscape view, but look silly on smartphones. So yet again we use the Beaver Builder media query options.
Writing our own media query for this scenario would be much easier. But this tutorial is for newbies who want to build their own site. So we’ll use the built in point and click settings!
(On my own site however, I would use a hand written media query. You can too if you’re a CSS wiz.)
How to make different size headlines for laptops and smartphones
To do this using Beaver Builder’s point and click settings, you duplicate the original headline module three separate times. Then display each individual module on just one device size. Most of the time you can make a good enough layout by having two duplicates of the module. One layout for iPad and larger and one layout for smartphones.
By default the Beaver Builder browser-width breakpoints are as follows:
- Medium device breakpoint: 992 px. The device behaviour changes from large to medium at 992 px.
- Small device breakpoint: 768 px. The device behaviour changes from medium to small at 768 px.
A really simple rule of thumb to help understand which breakpoint covers which device size…
- Large Device is: iPad Landscape as well as Laptops and above
- Medium Device is: iPad in portrait view only (not landscape)
- Small device is: Smartphones
Setting your own breakpoints
You can modify these breakpoints site-wide in the Beaver Builder, Page Builder global settings. However, I would only change the settings if you understand all of the implications and have the time and facilities to test your layouts on the devices you want to target.
Once again, here is the easiest way to understand the large, medium and small device settings…
- To target iPads in portrait view use MEDIUM
- Everything else is either large or small!
Testing layouts in Chrome web browser…
- R-click any web page > choose Inspect.
- From the mobile size chooser drop down, which appears at the top of the screen, choose Responsive.
- Type specific size into the width box.
Useful sizes to type into the Chrome browser, developer tools device size emulator…
- To preview a layout on a large sized monitor: 993 or above.
- To preview a medium sized monitor layout: 769-992.
- To preview a small sized monitor layout: 768 or less.