How to adjust the CSS for various resolutions?

In case you want to adjust elements on various resolutions, I would recommend this:

1. Use https://designmodo.com/responsive-test/ or http://responsivepx.com/ for simulating the viewport.

2. Use "Developer Tools" on Chrome or "Firebug" on Firefox to inspect the elements you want to adjust.

3. Use the proper CSS media queries to set the CSS for specific resolutions. Note that you can google for more info about CSS media queries.

Note: You can put your custom CSS into the "Style Customizer > Others > Custom CSS" box. For Schon theme and latters, you can find it here: 

  • "Appearance > Customize > Others > Custom CSS" or
  • "Appearance > Customize > Additional CSS"