CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chris McLernon
Chris McLernon

Reputation: 23

Vertical nav bar is overlapping main body when i resize?

I'm fairly new to coding less than 6 months and am working on my first paid website and I've run into an issue i'm really not sure how to fix. thanks for the help. I've already tried setting margins but CSS is tricky so maybe i'm not doing enough i'm really not sure how to fix

This is what the page looks like when down sized This is what the page looks like at regular size

.login-page{
  width: 360px;
  padding: 10% 0 0;
  margin: auto;
}
.form{
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.5);
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  border-radius: 25px;
}
.header-logo{
  width: 100%;
  max-width: 300px;
  height: auto;
}
.header{
  text-align: right;
  float: right
}
ul {
  list-style-type: none;
  margin: 15px;
  padding: 0;
  width: 300px;
  background-color: rgba(160, 143, 70, 0.4);
  font-family: "Roboto", sans-serif;
  border-radius: 25px;
  text-align: center;
  font-size: 20px;
}
li a {
  display: block;
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
}

<body>
  <div class="header">
    <img src="header-logo.png" class="header-logo">
    <ul>
        <li><a href="#home">Home</a></li>
        <br>
        <li><a href="#news">Store</a></li>
        <br>
        <li><a href="#contact">Contact</a></li>
        <br>
        <li><a href="#about">About</a></li>
      </ul>
  </div>
  <div class="login-page">
  <div class="form">
    <form class="register-form">
      <h1 class="register-header">Register</h1>
      <input type="text" placeholder="Username">
      <input type="text" placeholder="Email">
      <input type="text" placeholder="Password">
      <button>Create</button>
      <p class="message">Already Registered? <a href="#">Log-in</a></p>
    </form>
    <form class=:login-form>
      <h1 class="login-header">Log-In</h1>
      <input type="text" placeholder="Username">
      <input type="text" placeholder="Password">
      <button>Log-in</button>
      <p class="message">Not Registered? <a href="#">Register</a></p>
    </form>
  </div>
  </div>

Upvotes: 2

Views: 65

Answers (1)

Amarjit Singh
Amarjit Singh

Reputation: 1192

You can make it clear:both for login div in mobile mode. It is due to div .login-page where you gave margin:auto to make it centralized.

.login-page{
  width: 360px;
  padding: 10% 0 0;
  margin: auto;
}
.form{
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.5);
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  border-radius: 25px;
}
.header-logo{
  width: 100%;
  max-width: 300px;
  height: auto;
}
.header{
  text-align: right;
  float: right
}
ul {
  list-style-type: none;
  margin: 15px;
  padding: 0;
  width: 300px;
  background-color: rgba(160, 143, 70, 0.4);
  font-family: "Roboto", sans-serif;
  border-radius: 25px;
  text-align: center;
  font-size: 20px;
}
li a {
  display: block;
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
}
@media(max-width:767px){
.login-page{
clear: both;
}
}
<div class="header">
    <img src="header-logo.png" class="header-logo">
    <ul>
        <li><a href="#home">Home</a></li>
        <br>
        <li><a href="#news">Store</a></li>
        <br>
        <li><a href="#contact">Contact</a></li>
        <br>
        <li><a href="#about">About</a></li>
      </ul>
  </div>
  <div class="login-page">
  <div class="form">
    <form class="register-form">
      <h1 class="register-header">Register</h1>
      <input type="text" placeholder="Username">
      <input type="text" placeholder="Email">
      <input type="text" placeholder="Password">
      <button>Create</button>
      <p class="message">Already Registered? <a href="#">Log-in</a></p>
    </form>
    <form class=:login-form>
      <h1 class="login-header">Log-In</h1>
      <input type="text" placeholder="Username">
      <input type="text" placeholder="Password">
      <button>Log-in</button>
      <p class="message">Not Registered? <a href="#">Register</a></p>
    </form>
  </div>
  </div>

Upvotes: 1

Related Questions