Vfrdtyky

I have a background that I want to put text over it. It is somewhat responsive but if I view it on a smaller screen the text spills over the image. I want the size of the text to adjust to the shrinking size.

HTML:

<div className="row">

    <div className="col-md-12 text-overlay-container">

        <span className="text-overlay">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

        </span>

        <img className="d-block w-100 gradient-img" src="../images/slanted-gradient-background.png" alt="" />

    </div>

</div>

CSS:

.text-overlay-container {

    position: relative;

    text-align: center;

    color: white;

}



.text-overlay {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 70%;

}

Your answer is the Responsive Web Design Media Queries using the Typical Device Breakpoints:

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {...} 



/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {...} 



/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {...} 



/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {...} 



/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {...}

This example will allow you to re-scale your web-content depends of the screen of the device that runs the web page.

Also take a look to this specific
Example

Use the viewport width vw measurement to dynamically adjust the font size based on the viewport. Check out this very basic CodePen example.

.text-overlay-container {

    position: relative;

    text-align: center;

    color: white;

}

    

.text-overlay {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 70%;

    font-size: 3.5vw;

}

<div className="row">

    <div className="col-md-12 text-overlay-container">

        <span className="text-overlay">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>

        <img className="d-block w-100 gradient-img" src="../images/slanted-gradient-background.png" alt="" />

    </div>

</div>

You can either use media queries to reduce the size at certain breakpoints, ex:

@media only screen and (max-width: 767px) {

  .text-overlay {

    font-size: 75%;

  }

}

Or you can use calc and vw units to scale the text somewhat with the screen width, which will need some tweaking to get right, ex (simplistic example):

.text-overlay {

  font-size: calc(16px + 2vw);

}

That means a minimum font size of 16px, plus 2vw units.

More info on this technique (including more accurate and complex examples):
https://css-tricks.com/snippets/css/fluid-typography/