1

I'm very new to HTML/CSS, and am working on a website for my band. The problem I'm running into is that when I resize the window, the text gets jumbled up and the logo shrinks. I've already researched this problem, but haven't had any luck so far. The common solution seems to be to apply a wrapper class to the entire body of the text, specifying a min-width, but that hasn't worked.

I'd just like all of the content of the page to stay where it is when the browser window is resized. Here is my HTML:

body {
  background-color: black;
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
}

.banner {
  position: absolute;
  top: 20px;
  margin-left: 40px;
}

.navbar {
  color: skyblue;
  font-size: 17px;
  font-family: "Courier New";
  font-weight: lighter;
  position: absolute;
  top: 350px;
}

.navbarlinks {
  text-decoration: none;
  color: skyblue;
}

a.navbarlinks:hover {
  color: azure;
}
<body>

  <div class="wrapper">

    <div class="banner">
      <img src="https://i.imgur.com/8d3CGHC.jpg" height=80% width=80%>
    </div>



    <nav>
      <h1 class="navbar">
        <a class="navbarlinks" href="shows.html">S h o w s</a> |

        <a class="navbarlinks" href="listen.html">L i s t e 
                n</a> |

        <a class="navbarlinks" href="watch.html">W a t c h</a> |

        <a class="navbarlinks" href="dance.html">D a n c e</a> | <a class="navbarlinks" href="dance.html">C o n t a c 
                t</a>
      </h1>

    </nav>

  </div>

</body>

Here's what the page looks like fullscreen:

(https://i.stack.imgur.com/6KgVD.png)

And then when I make the browser window narrower:

(https://i.stack.imgur.com/7Tc63.png)

Any tips are much appreciated, this has been driving me nuts. Thanks!

karthik
  • 150
  • 9
Mr. Cat
  • 27
  • 6
  • this is because of the spaces between alphabets, remove those and you should be fine – karthik May 14 '18 at 19:22
  • 1
    Adding `min-width` to a wrapper is the correct advice, but it's not working on your site because you're using `position: absolute` (which breaks through those constraints). I'd go as far as to say you're misusing absolute positioning here, since all you're doing is using it to create vertical space between elements. Use `margin` instead and remove the `position: absolute`. – Jon Uleis May 14 '18 at 19:24
  • Removing absolute positioning and using margin instead did seem to do the trick. I've run into issues sometimes when I try to re-position an element using margin and it doesn't actually move the element where I need it to go. Any ideas why this might be? But I will stick to using margin when I can. Also, I tried changing absolute to relative and that seemed to work as well. Thanks! – Mr. Cat May 14 '18 at 20:30

0 Answers0