T3. Advanced CSS (Reviewer)

Maya's website buttons look squished on tablet devices. In her CSS code, what's the best way to fix this?

• Delete all buttons on tablet view

• Make all buttons invisible on tablets

• Use the same desktop styling for all devices

• Create a media query for tablet size and adjust button padding and width

What is this specific screen size where the website’s styling adapts to fit the device called?

• screen size

• breakpoint

• screen

• screen point

A web developer is creating a product catalog. Users complain that all items are in one long row on desktop screens. Which Flexbox property should be implemented?

• A. flex-direction: column

• B. flex-wrap: wrap

• C. display: block

• D. justify-content: center

Emma's client wants their product cards to have softened corners instead of sharp edges. Which CSS property combination should she use?

• border-radius: smooth;

• border-radius: 15px

• border-style: curved;

• border-type: smooth

Miguel is developing a website to raise awareness about climate change as part of SDG 13: Climate Action. He wants to use a hero image of the Earth to emphasize the importance of protecting the environment. However, he notices that the image does not fully cover the section, leaving blank spaces on some screens. Which CSS property should Miguel use to ensure the background image completely covers the element and creates a visually impactful design?

• background-size: cover;

• background-position: full;

• background-size: contain;

• background-repeat: no-repeat

Fill in the blank: Tom's e-commerce site needs to adjust product cards based on screen size. On tablets, three cards should appear per row. He should use ________ to achieve this.

• Reduce card size only

• Hide extra cards on tablets

• Create separate websites for each device

• Use media queries with appropriate flex and width properties

Fill in the blank: When you layout CSS Cards using Flexbox, to evenly distribute items across the container, you should use ________.

• align-items: center;

• justify-content: space-around;

• justify-content: space-evenly;

• justify-content: space-between;

You have created a website for an online store, and you want to display product details in a neat, structured way. Each product should have an image, title, description, and a price inside a bordered box. Which design approach would best suit your needs?

• A CSS card layout

• A box for each product

• A sidebar menu with product links

• A long text description without images

Which CSS property is used to change the text color of an element?

• text-color

• color

• font-color

• style-color

Fill in the blank: To make a horizontally aligned elements, use the CSS property: display: ________

• block

• inline

• flex

• grid