Responsive Design Flashcards

What is the difference between `display: none` and `visibility: hidden` in responsive layouts?

Answer: display: none removes the element from flow; visibility: hidden hides it but keeps its space

display: none removes the element entirely from the document flow, while visibility: hidden hides the element but its box still occupies space.

Which CSS property creates a smooth transition when elements change size or position in a responsive layout?

Answer: transition

The transition property lets CSS property changes happen smoothly over a specified duration rather than instantly.

What is 'content shifting' and why is it a problem in responsive design?

Answer: Layout elements jumping position after the page loads, causing poor user experience

Content shifting (Cumulative Layout Shift) occurs when page elements move unexpectedly after initial render, disrupting users and hurting Core Web Vitals scores.

Which approach is recommended for responsive navigation menus on mobile devices?

Answer: Use a hamburger menu that expands on tap to reveal navigation links

A hamburger menu pattern hides navigation behind a toggle icon to save space on small screens while keeping links accessible.

What CSS property is used to set how a grid item spans multiple columns?

Answer: grid-column: span N

grid-column: span N (e.g., grid-column: span 2) causes a grid item to stretch across N column tracks.

What is the recommended maximum line length for body text to ensure readability on wide screens?

Answer: 45-75 characters

Typography best practices recommend 45-75 characters per line for comfortable reading, often achieved with a max-width on text containers.

Which CSS feature allows you to define named layout areas in a grid?

Answer: grid-template-areas

grid-template-areas lets you define named zones using string syntax, then assign elements to those zones with grid-area.