diff --git a/styles/style.css b/styles/style.css index 9571ab1..0ce655b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -177,3 +177,130 @@ header { } /* Write your CSS below */ + +/* +Iteration 01 +*/ +@media only screen and (max-width:759px){ + + .navbar { + width: 100%; + flex-direction: column; + } + + .navbar li { + width: 100%; + border-right: none; + border-bottom: 1px solid #ffffff; + } + + .navbar li:last-child { + border-bottom: none; + } + + .main-article { + flex-direction: column; + align-items: center; + width: 100%; + } + + .main-article .image { + width: 100%; + } + + .main-article .content { + width: 100%; + } + + .content h2{ + padding-top: 1.5rem; + } + + .articles-container { + display: flex; + flex-direction: column; + padding: 0px; + width: 100%; + } + + .article { + width: 100%; + margin-bottom: 1.5rem; + } + +} + +/* +Iteration 02 +*/ +@media only screen and (min-width:760px) and (max-width: 1024px){ + + .navbar { + width: 100%; + flex-direction: row; + } + + .navbar li { + width: 100%; + border-right: 1px solid #ffffff; + } + + .main-article { + flex-direction: row; + align-items: start; + width: 100%; + } + + .articles-container { + display: flex; + flex-direction: row; + justify-content: space-between; + box-sizing: border-box; + padding: 0px; + width: 100%; + } + + .article { + box-sizing: border-box; + width: 48%; + margin-bottom: 1.5rem; + } + +} + + +/* +Iteration 03 +*/ +@media only screen and (max-width:479px){ + + .navbar::after{ + padding-top: 0.25rem; + width: 100%; + height: 40px; + content: url(/images/menu-icon.png); + } + + .navbar li { + display: none; + } + + .main-article { + flex-direction: column; + align-items: center; + width: 100%; + } + + .articles-container { + display: flex; + flex-direction: column; + padding: 0px; + width: 100%; + } + + .article { + width: 100%; + margin-bottom: 1.5rem; + } + +} \ No newline at end of file