Responsive Tool

Introduction

YellowPencil comes with an advanced responsive design tool that lets you customize your website for any device such as mobile, tablet, desktops and more.

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 Tool Interface

Click on the image to zoom in.

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 condition 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 (text-align:center).

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

Below (max-width) condition:

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

Above (min-width) condition:

If you applied a style to 900px breakpoint with above (min-width) condition, this style appears to the devices has 900px and above 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, If the drop-down menu is clickable, so the breakpoint has styles applied from YellowPencil, and you can manage these styles. If this is not clickable, these breakpoints are from the theme; you are not able to directly manage it, but still, you can apply new CSS rules on the breakpoints of the theme.

How apply a style to specific screen size?

Sizing the page width as you want, select an element, and apply a style by using 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 sizing 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 size 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

Couldn't Find Your Answer?

Get quality customer support with our professional support team.

Create A Support Ticket
Live Editor