From 1c8ec021503d2071870a585cbe85f8670aa2b029 Mon Sep 17 00:00:00 2001 From: David Bouhaben Date: Tue, 18 Nov 2025 20:25:01 +0100 Subject: [PATCH 1/3] style: improve CSS formatting and add responsive design for navbar and articles for mobile --- styles/style.css | 54 +++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 47 insertions(+), 7 deletions(-) diff --git a/styles/style.css b/styles/style.css index 9571ab1..5638cdb 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,18 +4,28 @@ html { box-sizing: border-box; font-size: 16px; } - -*, *:before, *:after { + +*, +*:before, +*:after { box-sizing: inherit; } - -body, h1, h2, h3, h4, h5, h6, p, ol, ul { + +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ol, +ul { margin: 0; padding: 0; font-weight: lighter; } - /* DO NOT REMOVE - Styling for the label showing the viewport width */ .viewport-dimensions { position: fixed; @@ -27,7 +37,7 @@ body, h1, h2, h3, h4, h5, h6, p, ol, ul { padding: 5px 8px; font-size: 14px; } - + /* STYLES */ /* Fonts */ @@ -70,6 +80,10 @@ header { text-align: center; } +nav { + width: 100%; +} + .newspaper-name { font-size: 24px; padding: 10px; @@ -175,5 +189,31 @@ header { .btn-blue { background-color: #007bff; } - + +/* Responsive Design */ +@media screen and (max-width: 760px) { + .navbar { + flex-direction: column; + align-items: stretch; + } + + .navbar li { + width: 100%; + border-right: none; + border-bottom: 1px solid #ffffff; + } + + .navbar li:last-child { + border-bottom: none; + } + + .articles-container { + flex-direction: column; + align-items: stretch; + } + .articles-container article { + width: 100%; + } +} + /* Write your CSS below */ From 2fe4dd83238582e6c314f5db78357b44fc1a60dc Mon Sep 17 00:00:00 2001 From: David Bouhaben Date: Tue, 18 Nov 2025 20:32:34 +0100 Subject: [PATCH 2/3] feat: add responsive styles for navbar and articles in medium screens Small Screens (width > 760px and width < 1024px) --- styles/style.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/styles/style.css b/styles/style.css index 5638cdb..fdf9295 100644 --- a/styles/style.css +++ b/styles/style.css @@ -216,4 +216,28 @@ nav { } } +@media screen and (min-width: 760px) and (max-width: 1024px) { + .navbar { + flex-direction: row; + align-items: stretch; + } + + .navbar li { + width: 100%; + border-right: none; + border: 1px solid #ffffff; + } + + .navbar li:last-child { + border-bottom: none; + } + + .articles-container { + flex-direction: row; + } + .articles-container article { + width: 50%; + } +} + /* Write your CSS below */ From 8d28e2798e4098773481503ac9102788afad42bc Mon Sep 17 00:00:00 2001 From: David Bouhaben Date: Tue, 18 Nov 2025 20:58:33 +0100 Subject: [PATCH 3/3] feat: enhance responsive design for navbar and articles, adding media queries for better mobile support. All the three mobile, small and medium screen done --- index.html | 11 +++++++++-- styles/style.css | 29 ++++++++++++++++++++++++++++- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 1b8846b..37b7833 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@

Ironhack News

-
@@ -71,7 +79,6 @@

Article 3

- diff --git a/styles/style.css b/styles/style.css index fdf9295..a2751a6 100644 --- a/styles/style.css +++ b/styles/style.css @@ -87,7 +87,12 @@ nav { .newspaper-name { font-size: 24px; padding: 10px; - border-bottom: 1px solid white; +} + +@media screen and (min-width: 481px) { + .newspaper-name { + border-bottom: 1px solid white; + } } .navbar { @@ -240,4 +245,26 @@ nav { } } +@media screen and (max-width: 480px) { + .menu-item { + display: none; + } + .menu-item-burger { + display: block; + } + + .newspaper-name { + font-size: 24px; + padding: 10px; + } + + .articles-container { + flex-direction: column; + align-items: stretch; + } + .articles-container article { + width: 100%; + } +} + /* Write your CSS below */