Responsive Tool

Introduction

YellowPencil comes with an advanced responsive tool that lets you customize your website for any device.

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:

In YellowPencil editor, we call media queries as breakpoints.

Opens Responsive Tool

You can open the responsive tool from the left bar.

The Responsive Tool Interface

Click on the image to zoom in.

The green dot means that the breakpoint has customizations in the current customizing type.

What Are Breakpoints?

Breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout to the user.

What is the breakpoint condition?

Breakpoint conditions specify when styles in the breakpoint will be applied.

YellowPencil provides breakpoint conditions just based on width property; apply a style if the screen size is below than x width or apply a style if the screen size is above than x width.

Example: If the page width is less than 992 pixels, align text to center.

All breakpoints from the theme and plugins appear to the responsive tool. By default, the tool shows breakpoints that have the smaller (max-width) condition. You can change it as the larger (min-width) condition by clicking on the smaller link.

Smaller (max-width) condition:

If you applied a style to 900px breakpoint with smaller (max-width) condition, this style appears to the devices has 900px and smaller screen sizes.

Larger (min-width) condition:

If you applied a style to 900px breakpoint with larger (min-width) condition, this style appears to the devices has 900px and larger screen sizes.

Manage Breakpoints

You can manage styles just that you have applied to a specific size with the responsive tool.

Right-click on the breakpoints and manage them as you want.

How apply a style to specific screen size?

Resize the page width as you want, select an element, and apply a style by using the element inspector and right panel.

If not required; make your edits on the existing breakpoints. Using the existing breakpoint is better than create a new breakpoint, so click on the existing breakpoints to active it and start editing.

How to test responsive compatibility?

Slowly resize the page width with the responsive tool and be sure this looks good on all screen sizes.

Can I add media queries with a custom condition?

Yes, you can add by using CSS editor.

Tips

  • Use % instead of the pixel for measures properties.
  • Use display property to hide elements from right panel > extra.

Popular breakpoint sizes:

  • Below of 768 pixels is xsmall devices.
  • 768 pixel and above is small devices.
  • 992 pixel and above is medium devices.
  • 1200 pixel and above is large devices.
Was this article helpful?
YesNo
Live Editor