Kadence Tutorial Session 5
In this Kadence Tutorial session, we will look at the basics of responsive design. That is, designing a website to display on a range of devices …specifically desktop, tablet and mobile devices.
Responsively is very useful app for monitoring responsive designs on websites on a wide range of devices. We use Responsively quite extensively in this session. I recommend that you download a free copy and become familiar with its use.
To illustrate the principles of responsive design we check out a post in the Kadence support forum which discusses the various CSS break points used in the theme.
In the tutorial we focus on design of a mobile header; layout of post archive and padding around columns in a section.
Please feel free to add comments and ask questions in the Comments area below this post.
Session Video
The following video is a screen recording of the tutorial. Check out the features of the video player explained below to get the best experience of playing this video.
This video is also available on my YouTube channel.
Features of video player
The video is displayed in the Presto Player which has a number of very useful features which are accessed through the six icons in the lower right hand corner of the video frame.
- The first icon displays the chapters – time points embedded into the video. Click the icon to display the table. Select the desired chapter and click. The video will begin to play from that point.
- The second icon is a MUTE button.
- The third icon is a slider volume bar.
- The fourth “gear” icon is a setting selector. Clicking that icon allows you to select the required quality and speed. The video is produced and delivered in HD resolution (1080p) and can be played in full screen mode if the your internet bandwidth is sufficient.
- The fifth icon selects a Picture In Picture mode.
- The final icon selects full screen playback mode.
