Responsive Design
Responsive web design is essentially the implementation where websites adapt to different screen resolutions. Because there has been such a push towards mobile web design with the advent of smartphones and tablet devices, responsive design is an essential component of making the mobile experience good for your site visitors.
You can see the responsive design in action by shrinking the size of your browser window to see the different displays that will occur for users coming in on different devices...
Resolutions
The responsive design components of the website are handled in the style.css file where media queries are set up to change the display of the website based on the screen resolution. A general layout of these can be found below. Something similar to this will be found in your style.css file
@media only screen and (min-width: 481px) and (max-width: 767px) { }
@media only screen and (min-width: 768px) and (max-width: 980px) { }
Custom CSS gets set when the screen resolution is less than or in-between these specific widths.
If you want your images to resize with the responsive views, you may have to add the proper class in the CSS.
Sliders
The following sliders are responsive...
- FlexSlider
If you are using a slider that is not responsive, you should set the slider to not display for responsive views in the theme options.