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:

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.

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.

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.