programming beginner 10 sample questions

Responsive Design MCQ Practice Test

Using media queries to adjust layouts for different screen sizes. Implementing grid and flexbox for layout management.

Q1. You're building a responsive website and want the main content area to always take up at least 50% of the viewport width, even on smaller screens. Which CSS property is BEST suited to achieve this, assuming you're using a container element for the main content?

A. min-width ✓
B. width: 50%
C. flex-grow: 1
D. max-width: 50vw

Explanation: The `min-width` property ensures the element is at least 50% wide, adapting to larger screens gracefully. `width: 50%` would make it always 50%, while `flex-grow: 1` needs a flexbox parent. `max-width: 50vw` would limit the width, not enforce a minimum.

Q2. You're designing a website logo. To ensure it displays correctly on various screen sizes, from small mobile phones to large desktop monitors, which CSS property is MOST crucial for responsive scaling without distortion?

A. width
B. font-size
C. max-width ✓
D. padding

Explanation: Using `max-width` allows the image to scale down proportionally to fit smaller screens while preventing it from stretching and distorting. `width` alone would force a fixed width, causing issues on different screen sizes.

Q3. You're building a website using a CSS media query: `@media (max-width: 768px) { ... }`. What screen size range will this CSS code specifically target?

A. Screens wider than 768 pixels
B. Screens exactly 768 pixels wide
C. Screens narrower than 768 pixels ✓
D. Screens between 767 and 769 pixels wide

Explanation: The `max-width` media query applies the enclosed CSS rules only when the screen width is less than or equal to 768 pixels. Therefore, it targets screens narrower than 768 pixels.

Q4. You're building a website and want the navigation menu to stack vertically on smaller screens, while remaining horizontal on larger screens. Which CSS media query property is MOST directly relevant for controlling this layout behavior based on screen width?

A. max-width ✓
B. min-height
C. aspect-ratio
D. font-size

Explanation: The `max-width` property in a media query allows you to apply styles when the screen width is at or below a certain value. This is ideal for controlling the layout changes needed for responsive design on smaller screens.

Q5. You're designing a website and want the navigation menu to appear as a hamburger icon on smaller screens but expand horizontally on larger screens. Which CSS property is MOST directly relevant for achieving this responsive behavior, assuming you're using a media query?

A. display ✓
B. font-size
C. color
D. text-align

Explanation: The `display` property allows you to switch between different layout modes (e.g., `block`, `inline-block`, `none`) depending on the screen size. Using media queries, you can set `display: block;` for smaller screens (hamburger menu) and `display: inline-block;` (or similar) for larger screens (horizontal menu).

Q6. You're designing a website for a bakery. You want the images of delicious pastries to scale appropriately on different screen sizes, maintaining their aspect ratio without distortion. Which CSS property is BEST suited for this task?

A. `object-fit: cover;` ✓
B. `width: 100%; height: auto;`
C. `max-width: 100%; height: auto;`
D. `transform: scale(1);`

Explanation: While `width: 100%; height: auto;` and `max-width: 100%; height: auto;` maintain aspect ratio, `object-fit: cover;` ensures the image covers the entire container, scaling proportionally while potentially cropping parts of the image to maintain the aspect ratio. `transform: scale(1);` doesn't inherently handle responsive scaling.

Q7. You're designing a website and want the navigation menu to collapse into a hamburger icon on smaller screens. Which CSS media query would best target screen sizes below 768 pixels for this specific styling?

A. @media (max-width: 768px) ✓
B. @media (min-width: 768px)
C. @media (orientation: landscape)
D. @media (max-device-width: 768px)

Explanation: The `@media (max-width: 768px)` query applies styles only when the screen width is 768 pixels or less. `max-device-width` is less reliable across devices. `min-width` targets larger screens, and `orientation` targets landscape or portrait mode.

Q8. You're designing a website's navigation menu. To make it adapt its layout on smaller screens (like smartphones), which CSS technique is MOST crucial?

A. Media queries that apply different styles at different screen widths ✓
B. font-size: 12px
C. width: 100%
D. margin-top: 20px

Explanation: Media queries apply CSS only at given screen sizes, letting a horizontal desktop menu restack, collapse into a hamburger, or change spacing on phones. The other properties are static values that render identically at every screen width.

Q9. You're designing a website for a mobile phone repair shop. You want the shop's address, which is quite long, to display neatly on both desktop and mobile screens. Which CSS property would be MOST effective in handling the potential line wrapping and text overflow of this long address on smaller screens?

A. word-break: break-word; ✓
B. text-align: justify;
C. font-size: 8px;
D. overflow: hidden;

Explanation: The `word-break: break-word;` property allows long words to be broken at the end of a line, preventing horizontal overflow. `text-align: justify;` justifies text, but doesn't directly solve line breaks. Shrinking the font size (`font-size: 8px;`) is a less elegant solution and might be illegible. `overflow: hidden;` hides any overflowing content which is not what we want.

Q10. You're designing a website and want the navigation menu to collapse into an icon on smaller screens. Which CSS media query would BEST target screen sizes up to and including 767 pixels wide?

A. @media (max-width: 768px)
B. @media (min-width: 767px)
C. @media (max-width: 767px) ✓
D. @media screen and (max-device-width: 767px)

Explanation: The `max-width: 767px` media query targets screens with a width of 767 pixels or less. This is the most precise way to ensure the styling applies only to smaller screens.

That was just a sample. Sign up to unlock the full question bank with timed tests and certificates.