#supports .card:nth-child(2){ margin-top: 40px; } #supports .card { width: 80%; margin: 0 auto; display: block; padding: 20px; } #supports .card h1 { font-size: 1.5em; margin-bottom: 1em; } .prettyJson { display: grid; row-gap: 0; column-gap: 10%; } .prettyJson.two-col { grid-template-columns: 1fr 1fr; } .prettyJson.three-col { grid-template-columns: 1fr 1fr 1fr; } .prettyJson.four-col { grid-template-columns: 1fr 1fr 1fr 1fr; } @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (orientation: portrait) { #supports .card { width: 100%; } .prettyJson.two-col, .prettyJson.three-col { grid-template-columns: 1fr; } .subproperty { font-size: 2rem; } } .prettyJson .property { display: grid; grid-template-columns: 2fr 1fr; border-bottom: 1px solid rgb(202, 202, 202); padding: 1px; } .prettyJson > .property > span:nth-child(1) { background: #f3f3f3; padding: 5px; } .prettyJson > .property > span:nth-child(2) { background: #d0d0d0; padding: 5px; white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis; } .prettyJson .property.ok > span{ background: #40916c; font-weight: bold; color:white; } .supportedOption { background: #f3f3f3; margin: 5px; border: 1px solid #457b9d; } .supportedOption > span:nth-child(1) { font-weight: bold; font-size: 1.3em; background: #457b9d; display: block; padding: 5px; color: white; } .supportedOption > span:nth-child(2) { display: block; overflow: hidden; text-overflow: ellipsis; padding: 5px; } .subproperty { display: flex; padding: 10px; } .subproperty:nth-child(even) { background: gainsboro; } .subproperty span:nth-child(1) { flex: 1; } .subproperty span:nth-child(2) { flex: 2; } div#longCameraSupportedStrings { background: #f3f3f3; border: 1px solid #457b9d; margin: 5px; } #longCameraSupportedStrings > span{ display: block; padding: 10px; } #longCameraSupportedStrings > span:nth-child(1) { /* padding: 0px; */ background: #457b9d; /* margin: 0; */ font-weight: bold; color: white; }