How to let a div overflow in CSS?

user_16333973 0
Viewed 101

I'm making a static website from HTML and CSS.

What I want is I have a div oversized such that even the screen size goes down, it overflows and gets out of the screen having an oversized kind of effect.

Also, I have set the position: absolute so that it gets out of the flow, that's not a problem till now (providing this information so that maybe this can be the problem)

My HTML:

<div class="background-title">Adarsh Dubey</div>

*My CSS:

.background-title {
  font-size: 300px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-2%, -13%);
  white-space: nowrap;
  overflow: hidden;
}

Proper overflowed

The picture above shows the overflow kind of effect, which is fine. But notice that I'm in dev tools and the screen size is 1920px.

No Overflow Image

Now when I go screen size of around 1200px, the .background-title doesn't overflow but instead, it just allows the user to see horizontal scrollbar. What I want is that to get out from the screen so it looks really big.

Please Help.

css html
4 Answers

You need to tell the browser how big you want the box, otherwise it will keep expanding.

You can either set a width, or set the right property.

.background-title {
  font-size: 300px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-2%, -13%);
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  right: 0;
}
user_33776200

The simplest answer for this problem is to set the overflow property to hidden on body and set width to 100%.

In this way the body will remain at 100% and the overflowed content in it will be hidden

user_163278720

you have to use @media for particular screen where your text is oveflow

.background-title {
  font-size: 300px;
  position: absolute;
  top: 0;
  left: 0px;
  transform: translate(-2%, -13%);
  white-space: nowrap;
  overflow: hidden;
      padding: 15px;
}

@media only screen and (max-width: 1750px) {
    .background-title {
        font-size: 250px;

    }
}

@media only screen and (max-width: 1500px) {
    .background-title {
        font-size: 200px;

    }
}



@media only screen and (max-width: 1200px) {
    .background-title {
        font-size: 150px;

    }
}

@media only screen and (max-width: 1024px) {
    .background-title {
        font-size: 130px;

    }
}



@media only screen and (max-width: 991px) {
    .background-title {
        font-size: 100px;

    }
}



@media only screen and (max-width: 767px) {
    .background-title {
        font-size: 50px;

    }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>


</head>
<body>
    <div class="background-title">Adarsh Dubey</div>

</body>
</html>

user_130114860

it's easier if you use bootstrap unless you can use media for that issue e.g.

.background-title {
  font-size: 300px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-2%, -13%);
  white-space: nowrap;
  overflow: hidden;
}

@media (min-width: 576px) { // you can change the screen size to any size that you like but there are some standard sizes
.background-title {
  font-size: 80px;
}
}
user_42962570
Related