IT Questions and Answers :)

Tuesday, March 20, 2018

A webpage has six images with large margins. These margins cause viewing problems on small screens such as phones. Which css will remove the margins on small devices?

A webpage has six images with large margins. These margins cause viewing problems on small screens such as phones. Which css will remove the margins on small devices?

  • @media screen and (max-width:600;){ img {margin:0px;} }
  • @media screen and (max-width:600px){ #img {margin:0px;} }
  • @media screen and (max-width:600px){ img {margin:0px;} }
  • @media screen and (min-width:600px){ img {margin:0px;} } 

 
A webpage has six images with large margins. These margins cause viewing problems on small screens such as phones. Which css will remove the margins on small devices?

EXPLANATION

img is an HTML tag, so it is referred to without any prefix. #img would be an ID, which can only refer to a single item, so would not be suitable here. (In practice we might use a class though.)
max-width will apply the conditional css to screens of less than the stated width. min-width would affect only larger screens, which is not what we want.
Nasty gotcha: (max-width:600;) is invalid syntax. Although this looks like a standard css statement, it is actually a special comparison clause. It must not be terminated with a semicolon. (Trailing semicolons are optional on single css statements, but for some obscure reason are not allowed here.) 

SOURCE

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Share:

Popular Posts

Blog Archive