Sizing and positioning content in a Responsive Project

When defining the position of the breakpoints earlier in this chapter, you had to choose the devices that you wanted to design for. In this case, you decided to place the breakpoints according to the viewport width of an iPad mini held in portrait mode and of an iPhone 4 also in portrait mode. This is probably sufficient for the vast majority of the situations, but there will be students who will take the course on different devices than those anticipated.

In this section, you will concentrate on the responsiveness of the course in between the breakpoints. If a student has a screen width that does not quite exactly match the position of the breakpoints, the course will look fine anyway.

Making images responsive

A responsive object has the ability to adapt its size and position to the screen on which it is viewed. To make this adaptation possible, it is necessary to employ slightly different sizing techniques than those used in a regular...