CODEWITHSUNDEEP
htmlcss
Iso
Iso

Reputation: 93

Get rid of unknow overflow CSS

I want to get rid of the overflow on the x axis and cannot find the reason for why its actually happening because its not very obvious. Every vw/width properties are set to 100. I'm pretty sure the .logout is causing this issue but I don't know what I should modify in order to fix it. Any help is appreciated!

/* GLOBAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: monospace;
}

header {
    position: relative;
}

/* MAIN */
.logo {
    position: absolute;
    top: 25px;
    left: 40px;
    font-weight: 800;
    font-size: 2.5rem;
}

.container {
    background-color: black;
    width: 100vw;
    height: 100vh;
}

/* NAVBAR */
.nav {
    width: 100vw;
    height: 80px;
    background-color: #5f7866;
}
.navbar {
    position: absolute;
    top: 30px;
    left: 40%;
}

.items {
    display: flex;
    list-style: none;
}

.item {
    font-size: 2rem;
    margin-left: 20px;
    color: black;
    font-weight: lighter;
    transition: 0.2s;
}

.item:hover {
    transition: all 0.1s ease;
    transform: scale(0.98);
    border-bottom: 1px solid white;
}

.links {
    display: inline-block;
    text-decoration: none;
    color: black;
}

.logout {
    position: absolute;
    font-size: 2rem;
    border: 2px solid #49e31b;
    background-color: transparent;
    border-radius: 20px;
    padding: 10px 10px 10px 10px;
    top: -10px;
    left: 600px;
    transition: 0.3s;
    color: black;
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
}

.logout:hover {
    background-color: #49e31b;
    cursor: pointer;
    transform: scale(0.98);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <title>{% block title %}  {% endblock title %}</title>
</head>
<body>
    <header class="nav">
        <h1 class="logo">Art Showcase</h1>
        <div class="navbar">
            <ul class="items">
                <li class="item">
                    <a class="links" href="{% url 'home' %}">Home</a>
                </li>
                <li class="item">
                    <a class="links" href="{% url 'about' %}">About</a>
                </li>

                <li class="item">
                    <a class="links" href="{% url 'register' %}">Register</a>
                </li>
                <li class="item">
                    <a class="links" href="{% url 'login' %}">Login</a>
                </li>
            </ul>
            <div>
                <a class="logout "href="{% url 'logout' %}">Logout</a>
            </div>
        </div>
    </header>

    <div class="container">
    {% block content %} 

    {% endblock content %}
    </div>

</body>
</html>

Upvotes: 0

Views: 57

Answers (2)

Manish Khatri
Manish Khatri

Reputation: 161

The whole issue is the way you are using positioning and broken html structure (you forgot to close the navbar div after ul and opened another div for logout button. Use the code below for your reference :

body {
  margin:0;
  padding:0;
  font-family:monospace;
}
.nav {
  display: grid;
  grid-template-columns:auto auto auto;
  grid-gap : 30px;
  background: #5f7866;
  padding:10px;
}

.navbar .items li {
  display:inline-block;
  list-style:none;
  font-size:2em;
  margin-right:10px;
}

.navbar .items li a {
  color:#000;
  text-decoration:none;
}

.item:hover {
    transition: all 0.1s ease;
    transform: scale(0.98);
    border-bottom: 1px solid white;
}

.logoutDiv {
  text-align:right;
}

.logout {
    font-size: 2rem;
    border: 2px solid #49e31b;
    background-color: transparent;
    border-radius: 20px;
    padding: 10px 10px 10px 10px;
    transition: 0.3s;
    color: black;
    display: inline-block;
    text-decoration: none;
}

.logout:hover {
    background-color: #49e31b;
    cursor: pointer;
    transform: scale(0.98);
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <title>{% block title %}  {% endblock title %}</title>
</head>
<body>
    <header class="nav">
        <div>
          <h1 class="logo">Art Showcase</h1>
        </div>
        <div class="navbar">
            <ul class="items">
                <li class="item">
                    <a class="links" href="{% url 'home' %}">Home</a>
                </li>
                <li class="item">
                    <a class="links" href="{% url 'about' %}">About</a>
                </li>

                <li class="item">
                    <a class="links" href="{% url 'register' %}">Register</a>
                </li>
                <li class="item">
                    <a class="links" href="{% url 'login' %}">Login</a>
                </li>
            </ul>
           </div>
            <div class="logoutDiv">
                <a class="logout "href="{% url 'logout' %}">Logout</a>
            </div>
        </div>
    </header>

    <div class="container">
    {% block content %} 

    {% endblock content %}
    </div>

</body>
</html>

I hope this solves your issue.

Upvotes: 2

Sanmeet
Sanmeet

Reputation: 1410

Try using 100% instead of 100vw as it can be helpful ...

The problem is caused by your .logout class

A small fix to set your overflow

html , 
body{
    overflow-x: hidden;
 }

Complete CSS fix

/*GLOBAL */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace;
}

header {
  position: relative;
}

/* MAIN */


.container {
  background-color: black;
  width: 100vw;
  height: 100vh;
}

/* NAVBAR */

.items {
  display: flex;
  list-style: none;
}

.item {
  font-size: 2rem;
  margin-left: 20px;
  color: black;
  font-weight: lighter;
  transition: 0.2s;
}

.item:hover {
  transition: all 0.1s ease;
  transform: scale(0.98);
  border-bottom: 1px solid white;
}

.links {
  display: inline-block;
  text-decoration: none;
  color: black;
}

.logout {
  font-size: 2rem;
  border: 2px solid #49e31b;
  background-color: transparent;
  border-radius: 20px;
  padding: 10px 10px 10px 10px;
  transition: 0.3s;
  color: black;
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
  float: right;
}

.logout:hover {
  background-color: #49e31b;
  cursor: pointer;
  transform: scale(0.98);
}

.nav {
  width: 100vw;
  height: 80px;
  background-color: #5f7866;
  padding-inline: 5%;
}

.navbar  , .nav {
  display: flex;
  align-items: center;
}
.navbar > * {
  flex-basis: 100%;
}
.nav > * {
  flex-basis: 100%;
}

Upvotes: 0

Related Questions