How to add Media Queries with PageBuilder WordPress

WordPress Pagebuilder is a very helpful for your Design Layout. you can create row and column eassly. you can create various type of website using pagebuilder in wordpress. you can add heading, tagline images,icons and margin padding etc. How to add Media Queries with Page Builder WordPress

Can I use the Widget Styles > Attributes fields (i.e., the Widget Class and CSS Styles fields)

to set up media queries at specific breakpoints. For example, at a specific screen width range

I’d like to have the left column be 61.8% and the right column be 38.2%, and at a second

specific screen width range I’d like to have the left column switch to 55.8% and the right

column switch to 44.2%, as shown in the media queries below:

if you are facing problems with responsive layout in difference devices using Page Builder in WordPress.
Using this media Query and fix your Problems.

How to add Media Queries with Page Builder WordPress

Login to Dashborad ->WPBakery Page Builde->Custom css

@media (min-width: 1160px) and (max-width: 1280px) { #panel-demo .panel-widget-style

{width:57.8%;}}
@media (min-width: 1160px) and (max-width: 1280px) { #panel-demo .panel-widget-style

{width:42.2%;}}

@media (min-width: 920px) and (max-width: 980px) { #panel-44-0-0-0 .panel-widget-style

{width:57.8%;}}
@media (min-width: 420px) and (max-width: 560px) { #panel-44-0-1-0 .panel-widget-style

{width:42.2%;}}

Here’s a quick reference for the widths of the screens for the most popular devices:

  • iPhone – 640px
  • iPad – 1024px
  • Tablets – 1366px
  • Android phones – 640px, 720px, 854px, 960px are the most typical sizes
  • Extra large android phones – 1024px or 1066px
  • Smaller Windows phones – 480px
  • Larger Windows phones – 768px
  • Smaller and older phones – 320px
  • Netbooks and small desktops – 128px
  • Ultrabooks/Laptops – 1366px
  • Desktops and TVs – 1920px

If you use these screen widths for your screen media type, you’re on the right track to making your site look great across all devices.

You Can add different type of value as per your Devices.

CSS Responsive Breakpoints & Media Queries

With the Premium Add-On installed, you can change Page Builder Frameworks responsive Breakpoints under Theme Settings -> Responsive Breakpoints.

Responsive Breakpoint

Tags : How to add Media Queries with Page Builder WordPress

How To Fix 500 Internal Server Error In WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *