Using the Page Designer

  1. Home
  2. Support
  3. Using the Page Designer
  4. Responsive Breakpoints and Media Queries for Elegant Designs with Custom CSS

Responsive Breakpoints and Media Queries for Elegant Designs with Custom CSS

These days, webpages are viewed using multiple devices, like desktops, tablets or phones. Some visitors might never even go to your website on a desktop, so the first impression on a mobile device is crucial in this case. This means that a page should be adapted to work well regardless of where it is viewed and needs to fit any device.

Responsive web design uses CSS and HTML to size, hide, and move content to make it appear perfectly on any screen. The Page Designer is responsive and uses a combination of fluid grid layouts and media queries to work well on all devices.

Despite the page designer doing most of the job for you, sometimes you might need to perform some small adjustments to make sure your unique design fit a certain screen size. This is why you should get to know the Responsive Breakpoints, which are the points where the site layout changes to fit and adjust to certain screen sizes.

Test How the Content Looks for Different Devices

The Page Designer has responsive editing controls which make it easy to see how any page looks on desktop, tablet, and phone, with the goal of providing the best user experience across them. You can view the controls within the theme customizer or from the page designer while editing your contents and structure. Click on the device icons to change between views.

Page Designer Responsive Viewing Options:

In addition, most of the modules also allow you to customize options to some elements according to the device.

Theme Customizer Responsive Viewing Options:

Ranges of Width Definitions

The usual ranges of width for each device are as follow:

  • Large Desktop: 1405px and above
  • Standard Desktop: between 1100px and 1405px
  • Laptops and Large Tablets: between 980px and 1100px
  • Tablets: between 768px and 980px
  • Smartphones and small Tablets: between 320px and 768px;
  • Smartphones: between 320px and 480px.

Media Queries

If you need advanced edits, you should take a look at media queries. Media queries allow you to group CSS rules according to the media type, which can be print, screen, voice or all options. In this case, you can use All and adjust the width inside the brackets.

This is a list of the main media queries you can use in the page designer.

When creating your custom CSS, you can use this as a template.

 

/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {

}

 

 /*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {

}

 

/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {

}

 

/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {

}

 

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {

}

 

 /*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {

}

 

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?