CODEWITHSUNDEEP
htmlcss
Notron
Notron

Reputation: 35

Div with a lot of text goes out of page upon resizing

I am trying to make a simple responsive "about" page. Everything works till I resize the browser to a smaller window.

HTML

<div id="content">
        <div id="area-container">
            <h1>about</h1>
            <div id="textarea">
                <p>My name is...[lorem200words]</p>
            </div>
        </div>
    </div>

CSS

body {
    margin: 0 auto;
    overflow: hidden;
    font-family: 'Share Tech Mono', monospace;
}

#content {
    width: 100%;
    height: 2457px;
    background-image: url('../images/wallpaper.jpg');
}

#area-container {
    display:inline-block;
    margin-top: 50vh;
    margin-left: 50vw;
    transform: translate(-50%, -60%);
}


@media screen and (max-width:800px) {
    body {
        overflow-y: scroll;
    }

    #content {
        width: 100%;
        height: 100%;
        background-image: url('../images/connected.png');
    }
}

https://jsfiddle.net/a4uaquyp/3/

The problem is that the whole textarea div seems to jump out of the browser, when I add the overflow to the body it won't let me scroll up enough. There's also for some reason a lot of excess space below.

I tried using media querys to somehow push the #content down a bit with margin-top and vw/vh, I can't really think of anything else.

Upvotes: 0

Views: 831

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

The problem is your use of transform: translate(-50%, -60%), in combination with your margin-top: 50vh and margin-left: 50vw. While this offsets the content, it will overflow it if there is too much to display.

Instead, if you want to center a lot of content, I would recommend flexbox. This allows you to achieve your desired result with only a few lines of code:

#content {
  display: flex;
  align-items: center;
  justify-content: center;
}

#area-container {
  max-width: 50%;
}

This can be seen in the following:

@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');
body {
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Share Tech Mono', monospace;
}

#content {
  width: 100%;
  background-image: url('../images/wallpaper.jpg');
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px; /* Just to give space at the bottom */
}

#area-container {
  max-width: 50%;
}

#textarea {
  background-color: #fff;
  box-shadow: 0 0 3em #ccc;
  border-radius: 10px;
  padding: 10px;
}

#area-container h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 5vw;
}

#area-container h1:before,
#area-container h1:after {
  content: '-';
  font-weight: normal;
}

@media screen and (max-width:800px) {
  body {
    overflow-y: scroll;
  }
  #content {
    width: 100%;
    height: 100%;
    background-image: url('../images/connected.png');
  }
  #area-container h1 {
    font-size: 40px;
  }
}
<body>
  <div id="content">
    <div id="area-container">
      <h1>about</h1>
      <div id="textarea">
        <p>y name is... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odit repudiandae veritatis hic facere non aperiam sunt dolor, ut enim? Sunt tempora et saepe quae, optio fugiat, eaque corrupti dignissimos modi tenetur sint corporis
          dolore. Harum sunt eligendi, facilis, quos obcaecati consequatur earum, qui molestiae ducimus inventore optio. Minus quas sed, fugit fuga culpa neque magni quisquam doloremque tempora ad, et quia possimus voluptatibus enim iusto esse omnis recusandae
          in eos provident nobis totam aliquid. Iste fugit tenetur, odio voluptates impedit veritatis reiciendis. Enim eaque quod repudiandae velit eum, quo commodi, odio quasi quos laboriosam iusto dolores laborum sapiente tenetur nihil sunt, nam nostrum
          at accusamus id facere magnam! Quibusdam sint, velit similique harum alias neque doloremque labore iste officia repellat quae dolorum suscipit ad nostrum eaque quisquam, amet voluptatibus, laborum sit quaerat dolorem sunt laudantium. Nam necessitatibus
          repellendus ipsum officia nulla commodi. Eveniet amet fuga, dolores voluptas nemo impedit laudantium facere, eum iste officiis perspiciatis. Quae ipsa eligendi dolor laborum optio ipsam commodi temporibus sequi, adipisci nobis facere, iste deserunt
          architecto rem odit ullam, tenetur fuga veniam. Sed maiores libero odio nostrum officia, dolores expedita quisquam asperiores eligendi ad soluta incidunt earum, vitae, omnis esse voluptatum perferendis ab commodi.</p>
      </div>
    </div>
  </div>
</body>

Also note that you don't probably want to restrict the height of #content. I've removed the height: 2457px from my above snippet.

Upvotes: 1

Related Questions