css..Using CSS only (without adding additional HTML attributes), st

Using CSS only (without adding additional HTML attributes), style articles so that they occupy the whole browser window and have the following properties? can any body solve this question from this website link below https://www.testdome.com/questions/html-css/articles/17099?questionIds=11099,17099,13562,18996,15408&generatorId=69&type=fromtest&testDifficulty=Hard i tried this code but gave wrong answer <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Articles</title> <style> body{ padding:0; margin:0; } article:nth-child(1) { background-color:red; width: 50%; height: 50vh; position: relative; top:0%; left:0%; } article:nth-child(2) { background-color:Yellow; width: 50%; height: 50vh; position: relative; right:-50%; top:-50vh; } article:nth-child(3){ background-color:Blue; width: 50%; height: 50vh; position: relative; left:0%; bottom:50vh; } article:last-child{ background-color:Green; width: 50%; height: 50vh; position: relative; right:-50%; bottom:100vh; } </style> </head> <body> <article >First</article> <article>Second</article> <article>Third</article> <article>Fourth</article> </body> </html>

css

23rd Aug 2018, 4:50 PM

Khaled

5 Answers

+ 1

if you do inspect first article inside body tag is actually 4th element so child actually starts from 4 that's the catch. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Articles</title> </head> <style> body { margin: 0px; } article { width: 50vw; height:50vh; float: left; position:relative; } article:nth-child(4) { background-color:red; } article:nth-child(5) { background-color:yellow; } article:nth-child(6) { background-color:blue; } article:nth-child(7) { background-color:green; } </style> <body> <article>First</article> <article>Second</article> <article>Third</article> <article>Fourth</article> </body> </html>

25th Apr 2020, 4:49 PM

Saurabh Kadam

right answer is <html> <head> <meta charset="utf-8"> <title>Articles</title> <style> html,body { padding:0; margin:0; height:100%; } article { min-height: 50%; width: 50%; float: left; } article:nth-child(1) { background: Red; } article:nth-child(2) { background: Yellow; } article:nth-child(3) { background: Blue; } article:nth-child(4) { background: Green; } </style> </head> <body> <article >First</article> <article>Second</article> <article>Third</article> <article>Fourth</article> </body> </html>

16th Nov 2018, 11:02 AM

rahul tailor

You need to set you body width and height to be 100% so it wont be scroll-able as per instruction , something like : body { margin: 0px; width:100%; height: 100%; }

27th Jul 2020, 12:13 PM

Snira Sinikiwe Nangoku Jumba

body { margin: 0px; display: grid; grid-template-columns: repeat(2, 1fr); font-size: 30px; } article:nth-child(1) { background-color: red; width: 50vw; height: 50vh; } article:nth-child(2) { background-color: yellow; width: 50vw; height: 50vh; } article:nth-child(3) { background-color: blue; width: 50vw; height: 50vh; } article:nth-child(4) { background-color: green; width: 50vw; height: 50vh; }

24th Mar 2021, 4:56 AM

Aalkemy

- 1

Replace "last-child" with "nth-child(4)" and it would work. The "last-child" isn't working as expected because of no parent tags, so if you add a <div> tag around the <article> tags, then the current CSS will work. But then if you are not supposed to add further HTML stuff, go with the former one. Hope that helps.

23rd Aug 2018, 5:51 PM

Alex