Website Design Responsive Website Design 4 — Questions and Answers
Question 1: What does the CSS property 'overflow: hidden' do in a responsive layout context?
- Hides the entire element
- Clips content that extends beyond the element's box, preventing horizontal scroll (Correct answer)
- Removes the element from the document flow
- Adds a scrollbar automatically
Correct answer: Clips content that extends beyond the element's box, preventing horizontal scroll
overflow: hidden clips any content exceeding the element's boundaries, which prevents unwanted horizontal scrollbars caused by overflowing child elements.
Question 2: Which meta tag is essential for preventing mobile browsers from scaling down desktop layouts?
- <meta name='robots'>
- <meta name='viewport' content='width=device-width, initial-scale=1'> (Correct answer)
- <meta charset='UTF-8'>
- <meta name='theme-color'>
Correct answer: <meta name='viewport' content='width=device-width, initial-scale=1'>
The viewport meta tag instructs mobile browsers to set the viewport width to the device's width and use a 1:1 initial scale.
Question 3: In a responsive grid, what is 'column dropping' and when does it occur?
- Columns are removed from the DOM on mobile
- Multi-column layouts reflow to fewer columns as viewport width decreases (Correct answer)
- Grid columns become hidden with display: none
- Columns are replaced with horizontal scrolling
Correct answer: Multi-column layouts reflow to fewer columns as viewport width decreases
Column dropping is a responsive pattern where columns stack vertically on small screens as there is no longer enough width to display them side by side.
Question 4: What is the purpose of using 'aspect-ratio' CSS property in responsive design?
- To set the image file's compression ratio
- To maintain a consistent width-to-height ratio as an element scales (Correct answer)
- To control video playback speed
- To define font aspect ratios
Correct answer: To maintain a consistent width-to-height ratio as an element scales
The aspect-ratio property preserves an element's proportional relationship between width and height as it scales, preventing layout shifts.
Question 5: Which technique is used to create a responsive navigation menu that collapses into a hamburger icon on small screens?
- Using CSS 'display: none' on all links at all sizes
- Hiding the navigation links and toggling visibility with a button using CSS or JavaScript (Correct answer)
- Converting the nav to a dropdown select element
- Removing navigation entirely on mobile
Correct answer: Hiding the navigation links and toggling visibility with a button using CSS or JavaScript
A hamburger menu hides navigation links by default on small screens and toggles their visibility when a button is clicked, typically with a class change.
Question 6: What is 'content shifting' (CLS) in the context of responsive design performance?
- Moving content to a CDN
- Unexpected layout shifts that occur as page content loads and repositions elements (Correct answer)
- Shifting content to different breakpoints
- A JavaScript animation technique
Correct answer: Unexpected layout shifts that occur as page content loads and repositions elements
Cumulative Layout Shift (CLS) measures visual instability caused by elements moving after initial render, often due to images or ads loading without reserved space.
Question 7: When designing a responsive table, what is a common technique for making wide tables usable on mobile?
- Removing all columns on mobile
- Wrapping the table in a scrollable container using overflow-x: auto (Correct answer)
- Converting the table to a list using JavaScript only
- Increasing the font size to fill the screen
Correct answer: Wrapping the table in a scrollable container using overflow-x: auto
Wrapping a table in a div with overflow-x: auto allows users to horizontally scroll the table without breaking the page layout.
Website Design Responsive Website Design 4
What does the CSS property 'overflow: hidden' do in a responsive layout context?