Content scales down, but then suddenly overflows

HTML & CSS
1

This is definetely new to me.
This is part of a new page I am building (please ignore the crappy design)
https://skoleprojekt-23d2e.web.app/vision

Notice that both the navbar and the text is fully responsive until it reaches around 480px width. Then it suddenly stops and overflows the container.
I tried using overflow: hidden; which didn’t do anything.
It only happens to this specific page and to the navbar.

Here is the code:

.container {
    padding-top: 60px;
    min-width: 100%;
    overflow: hidden;
    margin: 0;
.vision {
  max-width: 100%;
  height: 100%;
  padding-top: 60px;

  &__text-block,
  &__second-text-block {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
      padding: 0;
  }
  &__headline {
      font-size: 4.5em;
      color: $primary-color;
      padding: 30px;
      font-family: 'Anton', sans-serif;
  }
  &__text {
      font-size: 1.2em;
      letter-spacing: 1px;
      line-height: 40px;
      padding: 20px;
      font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
        &--letter-design {
      color: $span-letter-color;
      font-size: 1.8em;
      font-weight: 600;
  }
  }
}
}

And for the navbar

.nav {
    position: fixed;
    background-color: #333;
    height: 60px;
    width: 100%;
    z-index: 3000;
    .nav__logo {
        position: relative;
        top: 10px;
        left: 10px;
        height: 40px;
        width: auto;

    }
    &__list {
      display: flex;
      float: right;
      height: 100%;
      align-items: center;  
      margin: 0;
      padding: 0;
      top: 60px;
    }
    &__dropdown-toggle-btn {
      cursor: pointer;
      display: none;
      img {
        height: 40px;
        width: auto;
      }
    }
      &__item {
        position: relative;  
        list-style-type: none;
        padding: 30px 20px;
        margin-right: 50px;
        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
      }
        &__link {
            display: flex;
            flex-direction: row-reverse;
            text-decoration: none;
            color: #fff;
            font-size: 20px;
        }
        &__link:hover {
            color: green;
        }
        &__router-links {
          display: flex;
          flex-direction: row-reverse;
          text-decoration: none;
          color: #fff;
          font-size: 20px;
        }
        &__router-links:hover {
          color: green;
      }

    
  }
2

Hi there marc87dk,

when viewing your page, this is what I see…

screenshot

I assume that this is because your site does
not work at all with JavaScript disabled. :eek:

This is certainly the main problem with your
page and really overrides all of your other
considerations. :wonky:

coothead

3

Hi there marc87dk,

I also notice that your page code does not validate…

Nu HTML Checker - results

Here is the corrected code…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>portfolio</title>

<link href="/static/css/app.2c45b312e9ad6d6c2469f0678670e975.css" rel="stylesheet">

</head>
<body>

<div id="app"></div>

<script src="https://kit.fontawesome.com/06b4e8c93b.js" crossorigin="anonymous"></script>
<script src="/static/js/manifest.2ae2e69a05c33dfc65f8.js"></script>
<script src="/static/js/vendor.12165970f98088b13f26.js"></script>
<script src="/static/js/app.ebf8416bbe2c6d4206ce.js"></script>

</body>
</html>

coothead

4

Thank you for your reply.
That might be because the whole thing is made in Vue.js and compiled with Npm. All the content on my page is basically a lot of Vue components that is linked to an HTML file via a router =)
.

5

Well, that really is not an ideal way to create a web page. :unhappy:

Have a look at this article…

How to make a web page

…which contains pertinent information. :winky:

coothead

6

Thank you.
Yeah, I know, but my professor decided this semester that this was THE way to create websites, even though Vue is clearly designed to create apps.
Even creating something as simple as a page scroll from section to section required coding 3-4 seperate files. I just said “F it” and decided not to put too much effort into it. I highly doubt that I will run into a future customer that requires a website made in Vue :grin:

1 Like
7

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