CSS Layout & Responsive Design
Educational Notes (Quick Links)
- HTML and CSS Basics
- Floating Elements
- Nested Elements
- Negative Margin & Float Layout
- ‘Float’ Over ‘Position’ Sometimes
- The ‘Position’ Property
- Adaptive Images
- Use Media Queries Sparingly
- CSS Inheritance
- Source Order, Specificity, And !important
- Display (Inline vs Block)
- Pseudo Elements
- Pseudo Classes
Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.
Twenty Ten is looking increasingly better on smaller screens. But images can still break the layout, as in the image above. The problem here is that the image is bigger than its parent #content element. The solution is either simple or complex depending on how well you want to solve the issue.
Ideally, you should deliver smaller images on smaller devices. Delivering unnecessarily large images slows page speed and consumes extra bandwidth. I will address this challenge in the educational note on adaptive images below. But first, here’s a quick tip for solving the aesthetic issue.
Start a new line in the code area after the box-sizing selector (*) and type the following code:
Some points to note:
A new HTML element (picture) and image attribute (srcset) have been proposed by the powers that be as a way of loading screen-specific images. Unfortunately neither picture nor srcset are fully supported by modern browsers in 2016. But thankfully, there is an alternative method that’s also rather convenient: Adaptive Images (AI).
Rather than requiring developers to write extra HTML markup, AI works in a more automated way. When a page loads on mobile, AI downsizes any large images on the fly using PHP. The smaller images load faster and consume less bandwidth. Downsized images are cached on the server, so the resize only happens once. AI is also smart enough to automatically refresh cached images when the original image is modified.
AI is a great solution. You can implement it yourself in no time with this Adaptive Images for WordPress plugin.