Setting up Media Queries

When setting up a Theme, you will want to set up multiple Image settings. These define sizes and file types for images when they display on the front end. When setting these up, you can add Media Queries to change the image dimensions for different screens.

Set up Media Queries for specific break points and the image will automatically change itself. When loading on smaller screens it will load faster if LazyLoad is setup, only loading the images needed instead of all sizes at once. Make sure to use the correct formatting for the media query: "(max-width: 999px)" or it will not work. The brackets are necessary.