22 captures

29 Sep 2017 - 28 Nov 2025

Oct	NOV	Dec
	29
2020	2021	2022

success

fail

About this capture

COLLECTED BY

Collection: Common Crawl

Web crawl data from Common Crawl.

TIMESTAMPS

The Wayback Machine - http://web.archive.org/web/20211129201636/https://www.fullstackpython.com/responsive-design.html

Responsive Design

Responsive design is a method of using media queries in Cascading Style Sheets (CSS) to ensure a site is usable on various devices with different screen sizes, from very small to very large. Three different screen sizes and devices with the same website that uses a responsive designt.

Full Stack Python uses responsive design to improve readability across a broad range of devices that people use to read this site.

Responsive design resources

The Responsive Design podcast and accompanying email newsletter interview web designers who've dealt with creating responsive designs from both a blank slate and retrofitting into an existing site. This site is entirely on responsive design and has many articles on how to achieve readability across devices. Using Media Queries For Responsive Design In 2018 contains a bunch of great examples for how to use media queries to achieve a responsive design. Making Tables Responsive With Minimal CSS steps through a couple of ways to responsively handle tables. Smashing Magazine's article from 2011 on responsive design - what it is and how to use it remains a definitive source for understanding why sites should be responsive. Fundamentals of responsive images shows the code behind several ways to make your web images resize according to browser window size. ResponsiveViewer is a Chrome plugin in that allows you to view multiple sizes and devices in the same browser window. This is a handy tool to avoid constantly flipping between tabs or resizing the same tab to see the changes you are making to a design.

What topic do you want to learn next?

I want to learn how to code a Python web application using a framework. I've built a Python web app, now how do I deploy it? How do I improve an app's user interface?

Sponsored By

The most accurate speech-to-text API. Built for Python developers.

1. Introduction 2. Development Environments 3. Data 4. Web Development Web Frameworks Django Flask Bottle Pyramid TurboGears Falcon Morepath Sanic Other Web Frameworks Template Engines Jinja2 Mako Django Templates Web Design HTML Cascading Style Sheets (CSS) Responsive Design Minification CSS Frameworks Bootstrap Foundation JavaScript React Vue.js Angular Task Queues Celery Redis Queue (RQ) Dramatiq Static Site Generators Pelican Lektor MkDocs Testing Unit Testing Integration Testing Debugging Code Metrics Networking HTTPS WebSockets WebRTC Web APIs Microservices Webhooks Bots API Creation API Frameworks Django REST Framework API Integration Twilio Stripe Slack Okta Security SQL Injection CSRF 5. Deployment 6. DevOps Changelog What Full Stack Means About the Author Future Directions Page Statuses ...or view the full table of contents.

Full Stack Python

Full Stack Python is an open book that explains concepts in plain language and provides helpful resources for those topics.

Updates via Twitter & Facebook.

Chapters

1. Introduction 2. Development Environments 3. Data 4. Web Development » Responsive Design 5. Deployment 6. DevOps Changelog What Full Stack Means About the Author Future Directions Page Statuses ...or view the full table of contents.