Website Design Responsive Website Design 4

Question 1

What does the CSS property 'overflow: hidden' do in a responsive layout context?

Accepted Answer

Clips content that extends beyond the element's box, preventing horizontal scroll

Answer

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?

Accepted Answer

Answer

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?

Accepted Answer

Multi-column layouts reflow to fewer columns as viewport width decreases

Answer

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?

Accepted Answer

To maintain a consistent width-to-height ratio as an element scales

Answer

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?

Accepted Answer

Hiding the navigation links and toggling visibility with a button using CSS or JavaScript

Answer

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.

Website Design Practice Test

Website Design Practice Test

Website Design Responsive Website Design 4