Today all new templates are responsive, but note that sometimes developers only sets the Bootstrap or other responsive frameworks and responsive plugins (for sliders and etc.) and forget to properly fix styles for beautiful and correct display of website pages on mobile devices. Unfortunately we see such defects even on the top themes demos. Consider the basic errors.
All tests were executed on a mobile phones Samsung GT-S5830, Android version 2.3.6 and Samsung GALAXY S4 Mini, Android version 4.2.2.
1. Sliders
Sliders are the weakest point in responsive templates on narrow screens: stuck together text lines, collide buttons, shifted pictures, shifted off the screen text, too small, difficult to read text, or on the contrary text blocks overlapping the picture and so on.
Something can be corrected by changing styles and settings for mobile resolution, some errors are really hard to fix, and may be sometimes it’s better NOT to show slider on narrow screens (premium sliders, such as Revolution Slider, allow to make it via the settings).
Look at examples of incorrect sliders work on narrow screens
Pictures are shifted relative to each other – had to be under each other.

See on mobile
Stuck together text lines, button text and background are shifted.

See on mobile
Incorrect, distorted proportions of pictures.

See on mobile
Text blocks overlap the picture which in this case isn’t visible.

See on mobile
Here we see only a part of the slide – slider dosn’t resize to fit the screen.

See on mobile
Another example of nonresized slider:

See on mobile
Slider navigation covers active links on a slide. What will work when you click: navigation or button? Unfortunately link on the button is unavailable.

See on mobile
2. Rational use of the screen on the mobile device
Size of empty blocks is the same as on the big screen, sometimes taking a third or even half of the screen height.


See on mobile
3. Website header
Too small logos. Icons are placed too closely and so small that is hard to tap a link.
4. Navigation
Menu is available only when you are at the top of the page – it is very inconvenient when pages are so long.
ToTop button often doesn’t work.
See example:

See on mobile
5. Map
Enabled scrollwheel zooming on the wide (on small screens map is always fullscreen and has large height) map doesn’t allow users to scroll to content below the map, but just starts scrolling the map.
In the example below the map a contact form is located – try to see it.

See on mobile
6. Focus outlines on links
The default – orange – outline highlight color on focus isn’t changed – it often does not match the design.
7. Image/text carousel
When scrolling carousel its elements are not completely visible.

See on mobile