Web Development Responsive Design 4 — Questions and Answers
Question 1: What is the difference between `display: none` and `visibility: hidden` in responsive layouts?
- They are identical in behavior
- display: none removes the element from flow; visibility: hidden hides it but keeps its space (Correct answer)
- visibility: hidden removes the element from flow; display: none keeps its space
- display: none only works on block elements
Correct 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.
Question 2: Which CSS property creates a smooth transition when elements change size or position in a responsive layout?
- animation
- transition (Correct answer)
- transform
- keyframes
Correct answer: transition
The transition property lets CSS property changes happen smoothly over a specified duration rather than instantly.
Question 3: What is 'content shifting' and why is it a problem in responsive design?
- Moving content to a CDN for faster delivery
- Layout elements jumping position after the page loads, causing poor user experience (Correct answer)
- Shifting text alignment for RTL languages
- Changing content based on user geolocation
Correct 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.
Question 4: Which approach is recommended for responsive navigation menus on mobile devices?
- Always show all navigation links in a horizontal bar
- Use a hamburger menu that expands on tap to reveal navigation links (Correct answer)
- Redirect mobile users to a separate m. subdomain with no navigation
- Remove navigation entirely on mobile screens
Correct 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.
Question 5: What CSS property is used to set how a grid item spans multiple columns?
- grid-column-span
- column-count
- grid-column: span N (Correct answer)
- flex-span
Correct 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.
Question 6: What is the recommended maximum line length for body text to ensure readability on wide screens?
- 20-40 characters
- 45-75 characters (Correct answer)
- 100-120 characters
- No limit; wider is always better
Correct 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.
Question 7: Which CSS feature allows you to define named layout areas in a grid?
- grid-template-columns
- grid-area-names
- grid-template-areas (Correct answer)
- grid-named-lines
Correct answer: grid-template-areas
grid-template-areas lets you define named zones using string syntax, then assign elements to those zones with grid-area.
Web Development Responsive Design 4
What is the difference between `display: none` and `visibility: hidden` in responsive layouts?