Index: css/main.css =================================================================== --- a/css/main.css +++ b/css/main.css @@ -2,77 +2,85 @@ box-sizing: border-box; } body { background: grey; padding: 0; margin: 0; } h2 { - font-size: 30px; } + font-size: 26px; } p { margin: 0 0 10px; padding: 0; } .card-group { - padding: 30px; } + padding: 30px; + width: 100%; } .card { background: #fff; border: 1px solid black; } .card__header { height: 100px; margin-bottom: 20px; border: 2px solid plum; } .card__content { border: 2px solid cornflowerblue; } .card__footer { border: 2px solid lightcoral; } -/* Table Layout Fallback - * Note - requires a set height for the .card__footer +/* Float Layout Fallback + * Note - requires a set height for the .card__footer and .card__content */ -.card-group { +.card-group:after { + clear: both; + content: ""; display: table; } .card { - display: table-cell; position: relative; width: 100%; } @media (min-width: 600px) { .card { - width: 50%; } } + width: 50%; + float: left; } } @media (min-width: 800px) { .card { width: 33%; } } .card__content { margin-bottom: 50px; } + @media (min-width: 600px) { + .card__content { + height: 180px; } } .card__footer { height: 30px; width: 100%; position: absolute; left: 0; bottom: 0; } /* Grid Layout Enhancement - * + * Note - Only requires set height for the .card__header, and a max width for each .card */ -@supports (display: grid) { +@supports not (display: grid) { .card-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .card { display: inline-grid; grid-template-rows: minmax(100px, auto) 1fr auto; } @media all { .card { - width: 100%; } } + width: 100%; + float: none; } } .card__content { - margin-bottom: 20px; } + margin-bottom: 20px; + height: auto; } .card__footer { position: relative; height: auto; } } Index: index.html =================================================================== --- a/index.html +++ b/index.html @@ -20,37 +20,53 @@
Monetize your adblocking audience
+Learn how to serve Acceptable Ads and find more about getting your website whitelisted
+Learn how to serve Acceptable Ads and find more about getting your website whitelisted
+Monetize your adblocking audience
+Monetize your adblocking audience
Learn how to serve Acceptable Ads and find more about getting your website whitelisted
Monetize your adblocking audience
Learn how to serve Acceptable Ads and find more about getting your website whitelisted
-Learn how to serve Acceptable Ads and find more about getting your website whitelisted
-Monetize your adblocking audience