Technical Documentation challenge

HTML-CSS
1

Hi everyone,
I am new to coding and I block totally on this issue I ran into.
I used flex to format my nav links and solved all other issues before that.
But when it comes to my @media quiery I can’t get the full width.
I tried everything I could think of without success.
Any help would be appreciated

my html for nav

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technical Documentation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav id="navbar">
    <header>JS Documentation</header>
    <a class="nav-link" href="#introduction">Introduction</a>
    <a class="nav-link" href="#what_you_should_already_know">What you should already know</a>
    <a class="nav-link" href="#javascript_and_java">Javascript and Java</a>
    <a class="nav-link" href="#hello_world">Hello world</a>
    <a class="nav-link" href="#variables">Variables</a>
    <a class="nav-link" href="#declaring_variables">Declaring variables</a>
    <a class="nav-link" href="#variable_scope">Variable scope</a>
    <a class="nav-link" href="#global_variables">Global variables</a>
    <a class="nav-link" href="#constants">Constants</a>
    <a class="nav-link" href="#Data_types">Data types</a>
    <a class="nav-link" href="#if...else_statement">If...else statement</a>
    <a class="nav-link" href="#while_statement">While statement</a>
    <a class="nav-link" href="#fonction_declarations">Fonction declarations</a>
    <a class="nav-link" href="#reference">Reference</a>
  </nav>
<main id="main-doc">
  <section id="introduction" class="main-section">
    <header>Introduction</header>

and my CSS

* {
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
}
main {
  font-size: 14px;  
  margin: 0 40px 30px 300px;
  line-height: 1.4rem;
  padding-left: 30px;
  padding-top: 30px;
}

nav {
  display:flex;
  flex-direction: column;
  max-width: 300px;
  height: 100%;
  position: fixed;
  top: 0;
  left:0;
  margin-left: 0;
  border-right: 3px solid #878282;
}

nav a {
  font-size: 17px;
  text-decoration: none;
  color: #4d4e53;
  width: 300px;
  height: 40px;
  border-top: 1px solid black;
  padding-top: 10px;
  padding-left: 20px;
}
nav a:last-of-type {
  border-bottom: 1px solid black;
}

nav header {
  padding-top: 10;
  padding-bottom: 10px;
  padding-left: 20px;
}

li {
  margin-top: 10px;
  margin-left: 20px;
}

header {
  font-size: 28px;
}

p {
  margin-left: 10px;
}

code {
  display:block;
  margin-left: 35px;
  padding: 10px 20px;
  background: #f5f5f5;
  border-radius: 5px;
  white-space:pre-line;
  word-break: break-all;
}


@media screen and (max-width: 820px) {
   nav { 
    width:100%;
    min-width: 300px;
    max-height:280px;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden
  }
   main {
    position: relative;
    margin-top: 280px;
    margin-left: 0;
  }   
}

Capture2
Capture2714×813 92.6 KB

Capture0
Capture01810×817 231 KB

1 Like
2

reposting my html as it doesn’t seem to work in previous post, sorry…

Posting the code doesn’t work, and I don’t know what I am doing wrong (tell me if you can please)
So I post a screenshot of my corresponding html, sorry again

Capture3
Capture31030×656 105 KB

3

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
4

Thank you Jeremy, much appreciated
I’m such a noob :smiling_face:

If someone could help changing my user name also it would be great I didn’t find how to edit it. Thank you

5

Hi again,
I finally managed to fix everything, but I had to change from using “flex” to using “grid” (adding a div in my html code for the “a” elements).

Here is the result:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technical Documentation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav id="navbar">
    <header>JS Documentation</header>
    <div class="nav-grid">
      <a class="nav-link" href="#introduction">Introduction
      </a>
      <a class="nav-link" href="#what_you_should_already_know">What you should already know
      </a>
      <a class="nav-link" href="#javascript_and_java">Javascript and Java
      </a>
      <a class="nav-link" href="#hello_world">Hello world
      </a>
      <a class="nav-link" href="#variables">Variables
      </a>
      <a class="nav-link" href="#declaring_variables">Declaring variables
      </a>
      <a class="nav-link" href="#variable_scope">Variable scope
      </a>
      <a class="nav-link" href="#global_variables">Global variables
      </a>
      <a class="nav-link" href="#constants">Constants
      </a>
      <a class="nav-link" href="#data_types">Data types
      </a>
      <a class="nav-link" href="#if...else_statement">If...else statement
      </a>
      <a class="nav-link" href="#while_statement">While statement
      </a>
      <a class="nav-link" href="#fonction_declarations">Fonction declarations
      </a>
      <a class="nav-link" href="#reference">Reference
      </a>
    </div>
  </nav>
<main id="main-doc">
  <section id="introduction" class="main-section">
    <header>Introduction</header>

and the final CSS

* {
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
}
nav {
  width: 300px;
  height: 100%;
  position: fixed;
  top: 0;
  left:0;
  margin-left: 0;
  border-right: 3px solid #878282;
}

nav header {
  text-align: center;
  padding-top: 10;
  padding-bottom: 10px;
}

.nav-grid {
  display: grid;
  grid-template-columns: 300px;
  height: 70%;
  overflow-y: auto;
  overflow-x: hidden;
}

nav a {
  font-size: 17px;
  text-decoration: none;
  color: #4d4e53;
  height: 40px;
  border-top: 1px solid black;
  padding-top: 10px;
  padding-left: 20px;
}
nav a:last-of-type {
  border-bottom: 1px solid black;
}

main {
  font-size: 14px;  
  margin: 0 40px 30px 300px;
  line-height: 1.4rem;
  padding-left: 30px;
  padding-top: 30px;
}

li {
  margin-top: 10px;
  margin-left: 20px;
}

header {
  font-size: 28px;
}

#global_variables, #data_types, #while_statement header {   
    margin-top: 20px;  
}

p {
  margin-left: 10px;
}

code {
  display:block;
  margin-left: 35px;
  padding: 10px 20px;
  background: #f5f5f5;
  border-radius: 5px;
  white-space: pre-line;
  word-break: break-all;
}


@media screen and (max-width: 820px) {
   nav {
    position: absolute; 
    width:100%;
    min-width: 300px;
    margin: 0;
    border: none;
  }

  .nav-grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 40px;
    max-height:204px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  div {
    border-top: 2px solid;
    border-bottom: 2px solid;
  }

  nav header {
    text-align: center;
    margin: 10px auto;
  }

   main {
    position: relative;
    margin-top: 270px;
    margin-left: 0;
  }   
}

I would welcome and appreciate any feedback, as it is the best way to improve, if you see mistakes in the CSS or better way to write it.

I really do not like the idea of giving up on something, but I couldn’t make the responsive part with “flex” but since it worked with “grid” I am not totally annoyed.
However if someone cares giving me a solution using flex, I would love to study it.
Thank you and happy continuation to all! :two_hearts:

PS: the visual result which I couldn’t get with flex
From full page:

Capture
Capture885×685 105 KB

to responsive small, working this time:

Capture1
Capture1600×733 69.6 KB

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.