Also Add a media query for the screen type that checks that the viewport width i

Question

Also

Add a media query for the screen type that checks that the viewport width is 479 pixels or

less. When the width of the page is reduced to less than 480 pixels, all of the font sizes

should be reduced accordingly.

Calculator

Calculator

Use this form to calculate the order total

Quantity

Price Per Unit

Tax Rate (%)

Discount(%)

Total

Calculate

Copyright CSUN

CSS

form {
padding: 5%;
width: 50%;

}

legend {
color: red;
font-size: 150%;
}

fieldset {
padding: 10%;
}

h4 {
margin: 0px;
}

footer {
padding: 10px;
border-style: solid;
}

Calculator Use this formt total. Quantity 1 Price Per Unit 1.00 Tax Rate (%) 0.0 Discount(%) 0.00 Total 0.00 Aside Image Calculate

Explanation / Answer

A Media query is used to make CSS changes or add some CSS properties to some block of HTML elements when the screen size changes.

In your question you have asked to reduce the font-sizes when the width is less than 480px but didn't mention at what percent it must be decreased(no problem). For the media query will be:

@media screen and (max-width: 480px) {
    legend {
font-size: 100%;
}
}

This query means that if the width of the screen decreases less than 480px then the legend's font-size becomes 100%.

**Another Media Query: Chaning the font-size of only legend element

@media screen and (max-width: 300px) {
    legend {
font-size: 50%;
}
}

This query means that if the width of the screen decreases less than 300px then the legend's font-size becomes 50%.

**NOTE:

So in this way you add media queries with the required CSS changes. Like Legend's CSS properties changes you add the CSS properties changes to other elements too like form, footer, h4 etc. When changing the width of the screen does not change the height. So the form height remains same.

Related Questions

Navigate

• Browse (All)
• Browse A
• Subjects

---

---

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.