Media query

Q: How deeply does The Well-Grounded Python Developer: How the pros use Python and Flask cover media query?

Explains conditional CSS, cascading overrides, and a 768-pixel breakpoint through one banner example.

As explained in The Well-Grounded Python Developer: How the pros use Python and Flask

A media query is a CSS condition that applies styles according to properties of the user agent or viewport, such as screen width or resolution.

A media query makes CSS responsive by applying styles when a viewport condition is true. In a MyBlog banner, the default rule hides the image, while a minimum width of 768 pixels restores it for larger screens. This preserves small-screen space for content without requiring separate page layouts. section 7.2.1

The technique relies on CSS’s cascade: the later rule overrides the earlier one when its condition matches. Keeping the base rule and conditional override in base.css makes the behavior reusable across templates that inherit from base.html, including Bootstrap-styled pages. section 7.2.1

Hide a banner on narrow screens

Define `.banner { display: none; }`, then add `@media (min-width: 768px) { .banner { display: block; background: var(--background-url) no-repeat center center / cover; } }`. Resizing the browser activates the query and reveals or removes the banner.

How The Well-Grounded Python Developer: How the pros use Python and Flask covers it

Cover of The Well-Grounded Python Developer: How the pros use Python and Flask

liveBook manning.com

Read The Well-Grounded Python Developer: How the pros use Python and Flask on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

CSS in Depth, Second EditionAn @media query is a CSS conditional rule that applies styles when a media condition matches.
liveBook manning.com

Tiny CSS ProjectsA media query is a CSS conditional expression that tests media features or output conditions before applying styles.
liveBook manning.com

Web Design PlaygroundA CSS conditional rule that applies its enclosed styles only when the media type and/or media features match the current device or viewport.
liveBook manning.com

D3.js in Action, Third EditionA CSS media query is a conditional CSS construct that applies styles when specified device or viewport characteristics match.
liveBook manning.com

Web Design Playground, Second EditionAn @media rule is a CSS at-rule that conditionally groups stylesheet rules according to a media type or media feature.
liveBook manning.com

Build a Website with ChatGPTA media query is a CSS conditional expression that applies styles according to characteristics such as viewport width or device capabilities.

Compare how 7 books explain media query →

Related concepts

prefers-reduced-motionincludes · prefers-reduced-motion is a CSS media feature that indicates whether a user has requested reduced nonessential motion.
responsive web designused by · Responsive web design is an approach to designing websites whose layouts and presentation adapt to different screen sizes, viewports, and device characteristics.
viewportuses · A viewport is the visible region through which a browser or graphical interface displays a document or content.
CSSused by · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
min-widthincludes · The CSS min-width media feature matches when a viewport or output area is at least a specified width.

This explainer was generated by Manning's knowledge graph from the text of The Well-Grounded Python Developer: How the pros use Python and Flask. The section links point to the parts of the book it draws on.