When a div containing a large amount of text is resized, it extends beyond the bounds of the

I have been working on creating a straightforward responsive "about" page, and everything functions perfectly until I adjust the browser to a smaller size.

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 issue I am encountering is that the entire textarea section appears to jump out of the browser when I introduce the overflow to the body, preventing me from scrolling up adequately. Additionally, there seems to be a surplus of space below the content.

I have attempted to utilize media queries in an effort to adjust the position of #content by using margin-top and vw/vh, but I am unable to come up with an alternative solution.

htmlcss

Answer №1

The issue lies in using transform: translate(-50%, -60%) along with margin-top: 50vh and margin-left: 50vw. While this does center the content, it may cause overflow if the content is too large.

For centering a substantial amount of content, consider using flexbox. With just a few lines of code, you can achieve the desired outcome:

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

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

You can see this in action below:

@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>

Furthermore, avoid restricting the height of #content. I have removed height: 2457px from the snippet above.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Images within links appear with blue lines underneath them

Currently, I am in the process of adding links to a footer by using <img> tags with SVG images. However, I am encountering an issue where there are small blue lines under the icons. After searching online, it seems that you need to add this CSS code: ...

htmlcss

Utilizing Angular 9's inherent Ng directives to validate input components within child elements

In my current setup, I have a text control input component that serves as the input field for my form. This component is reused for various types of input data such as Name, Email, Password, etc. The component has been configured to accept properties like ...

javascripthtmlangulartypescriptforms

Is it possible to nest CSS Variables within CSS Variable names?

Is it feasible to embed a CSS Variable inside another CSS variable's name or perform a similar action like this: :root { --color-1: red; --index: 1; } span { color: var(--color-var(--index)) } ...

csscss-variables

Why does HTML validation matter after the webpage has finished loading?

After coming across an article recommending a workaround for a method that isn't considered strictly valid (using target="_blank") by using JavaScript to apply the rules after the page has loaded, I began contemplating if this approach is ethical. It ...

htmlw3c-validation

Guide to leveraging clsx within nested components in React

I am currently using clsx within a React application and encountering an issue with how to utilize it when dealing with mappings and nested components. For instance: return ( <div> <button onClick={doSomething}>{isOpened ? <Component ...

javascriptcssreactjstypescriptclsx

The width of mat-table columns remains static even with the presence of an Input field

I'm currently working on an Angular component that serves the dual purpose of displaying data and receiving data. To achieve this, I created a mat-table with input form fields and used {{element.value}} for regular data display. Each column in the tab ...

cssangulartypescriptangular-materialangular-material-table

What happens when browsers encounter unfamiliar at-rules?

CSS at-rules have been part of CSS since the days of CSS2. As CSS evolves with new specifications like @supports, it's interesting to see how different browsers handle unsupported rules. Do major browsers simply ignore unrecognized rules, or do they f ...

csscross-browser

Adjust the dimensions of a nested element within a container that has padding applied

After browsing through numerous similar questions regarding this issue, I have not been able to find a solution that works for my specific case. The HTML code in question is as follows: a{ display: block; padding: 3px 20px; clear: both; font-weight: ...

htmlcss

Switching carousel background image upon navigation click

I am currently working with a Bootstrap Carousel and I want to customize the background (an image) for each slide. I have 4 slides in total, each corresponding to a specific background image. <!DOCTYPE html> <html lang="en" dir="ltr ...

javascripthtmljquerycssbootstrap-4

the php renderer fails to take into account the styles

Trying to convey this as clearly as possible. I have the variables below: $name = main channel and $childs = sub channels. When I remove the childs from the HTML, only the main channel shows up - which is expected. However, when attempting to style the su ...

phphtmlcss

Appear and disappear gradually when hovering

When hovering over #one, the class .hidden is applied to #first. I have added a script to make .hidden fade out using transition: ease-in 0.3s;, but I am having trouble getting the fade in effect to work. I attempted adding transition: ease-in 0.3s; to #fi ...

jquerycss

Changing the appearance of a radio button dynamically upon clicking

I am currently working on a dynamic pickup date form that utilizes radio buttons. My goal is to change the style of the selected value when a user clicks on it. Below is the code I have tried, but it has not been successful: foreach ($period as $day){ ech ...

jquerycssformsradio-button

Embedding a thread in an HTML document (Difficult task)

I'm currently working on a method to achieve the following task: Embedding a specific string (such as "TEST") into the content of an HTML page, after every certain number of words (let's say 10). The challenge here is ensuring that the word count ...

javascriptjqueryhtml

Eliminate the use of "!important" in bootstrap CSS

I am trying to customize the .text-primary class with a color of my choice. To do this, I added the following code in my override file: @include text-emphasis-variant(".text-primary",$brand-primary, true); The text-emphasis-variant is a mixin from Bootst ...

htmltwitter-bootstrapbootstrap-4scss-mixins

Chrome does not allow the use of a CSS property for hover that has been used for animation

One issue I encountered is that when using a CSS property for animation and then also using the same property for a hover effect in Google Chrome, the hovering effect does not work properly. Below is the animation code: @keyframes fadeInUpBig { 0% { ...

htmlcsscss-animations

Monitoring changes in SASS files using node-sass through NPM

I have node-sass installed with the options set according to the guidance provided in a response on Using node-sass watch option with npm run-script, however, I am facing issues with it not working as expected. Below is the content of my package.json file ...

cssnode.jsnpmsass

Can additional classes/styles be added to a CSS3 background?

Today I discovered that CSS3 has the capability to support multiple backgrounds, which is truly amazing. What I would love is the option to combine multiple backgrounds dynamically, like this: .Watermarked{ background: url('text/logo.png') bot ...

cssbackground

Angular auto suggest feature

I am working with a dropdown in Angular that contains JSON data. The data is stored in a List named options and I need to display the name field in the dropdown list. My current task involves implementing an autocomplete search feature for this dropdown. ...

htmlangulartypescriptautocompleteangular-material

Having trouble with the :first-of-type Pseudo Class in CSS?

I have been attempting to style the first link in an li element with a specific font color. When the li element is clicked, it gains the "open" class. I've tried using both li a:first-of-type and li a:first-child pseudo-classes to achieve this, but ...

htmlcss

Add extra space to the dimensions of the div by incorporating padding

Showing my issue with an accompanying image: I am looking for a solution to include padding in the width: 50%; calculation. Currently, the first div's width is actually 50% + 2em because the padding was not factored in initially. Is there a way to i ...

htmlcsswidthpadding