Responsive text positioning?

responsive font-size
responsive text bootstrap 4
responsive text css w3schools
responsive text box
responsive text on image
responsive typography
responsive font-size css-tricks
how to make button text responsive in html

I use Bootstrap carousel slider with text (carousel-caption). It is responsive on all device, but the text is always centered and on the bottom of screen. I know how to position the text wherever I want.

But if I change the position, it isn't properly displayed on other devices. I just want to position the text to the left and in the middle of the screen and I want it to stay there when I resize the viewport.

.carousel-caption {
  top: 35%;
  width:500px;
  left: 220px;
  bottom: auto;
}

.red {
  color:red;
  
}

.carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.lnr {
  display: inline-block;
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: -0.05em;
  stroke-width: 1;
}

.services-icon {
  margin-bottom: 20px;
  font-size: 30px;
}
bgc2, .vLine, .hLine {
    background-color: #0F52BA;
}

.quote-icon {
  font-size: 40px;
  margin-bottom: 20px;
}
.services-icon {
    font-size: 60px;
    margin-left: 2rem;
}

    .slide1-title {
      font-size: 40px;
    } 
    
    .slide1-content{
      font-size:18px;
    }   
.btn-style-one {
  position: relative;
  padding: 14px 30px;
  line-height: 1em;
  background: #221f1f;
  margin-top: 20px;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  display: inline-block;
  border: 2px solid transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>                        
                </ol>
          <div class="carousel-inner" role="listbox">
            <!-- Slide One - Set the background image for this slide in the line below -->
            <div class="carousel-item active" style="background-image: url('https://images.wallpaperscraft.com/image/windows_7_black_glass_reflection_26309_1920x1080.jpg')">
              <div class="carousel-caption d-lg-block slide1-bg">
                
                    <h2 class="display-4  slide1-title" style="text-transform: uppercase; font-weight: bold;"></h2><br>
                <p class="lead slide1 slide1-content"><i>TEXT for position</i><br>
                    <a href="#o-nama" class="theme-btn btn-style-one scroll-to-target" data-target="#o-nama">BUTTON</a>
                
              </div>
            </div>
            
               </div>
            </div>        
          </div>
          <div class="carousel-arrow">
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
                      
          </div>

For minimal change; replace your '.carousel-caption' style block with the below:

.carousel-caption {
  top: 0 !important;
  left: 0 !important;
  width: 100%;
  max-width: 100vw;
  padding: 0 15%;
}

And add for that "I just want to put text left in the middle of the screen":

.carousel-caption .lead {
  text-align: left;
  position: absolute;
  top: 45vh;
}

Fiddle: https://jsfiddle.net/c3h0zt9b/

How To Create a Responsive Text, Responsive Font Size. The text size can be set with a vw unit, which means the " viewport width". That way the text size will follow the size of the browser window: � In addition to resize text and images, it is also common to use media queries in responsive web pages. With media queries you can define completely different styles for different browser sizes. Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stacked vertically on small

.carousel-item .carousel-caption {
  top: 35%;
  width:500px;
  left: 220px;
  bottom: auto;
right: auto;
text-align: left;
}

.red {
  color:red;
  
}

.carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.lnr {
  display: inline-block;
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: -0.05em;
  stroke-width: 1;
}

.services-icon {
  margin-bottom: 20px;
  font-size: 30px;
}
bgc2, .vLine, .hLine {
    background-color: #0F52BA;
}

.quote-icon {
  font-size: 40px;
  margin-bottom: 20px;
}
.services-icon {
    font-size: 60px;
    margin-left: 2rem;
}

    .slide1-title {
      font-size: 40px;
    } 
    
    .slide1-content{
      font-size:18px;
    }   
.btn-style-one {
  position: relative;
  padding: 14px 30px;
  line-height: 1em;
  background: #221f1f;
  margin-top: 20px;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  display: inline-block;
  border: 2px solid transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>                        
                </ol>
          <div class="carousel-inner" role="listbox">
            <!-- Slide One - Set the background image for this slide in the line below -->
            <div class="carousel-item active" style="background-image: url('https://images.wallpaperscraft.com/image/windows_7_black_glass_reflection_26309_1920x1080.jpg')">
              <div class="carousel-caption d-lg-block slide1-bg">
                
                    <h2 class="display-4  slide1-title" style="text-transform: uppercase; font-weight: bold;"></h2><br>
                <p class="lead slide1 slide1-content"><i>TEXT for position</i><br>
                    <a href="#o-nama" class="theme-btn btn-style-one scroll-to-target" data-target="#o-nama">BUTTON</a>
                
              </div>
            </div>
            
               </div>
            </div>        
          </div>
          <div class="carousel-arrow">
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
                      
          </div>

Positioning HTML text on background images - Blog, Positioning HTML text on an image isn't straight-forward in responsive web design We explore a few scenarios From; Building a Website. A great slider� Responsive text is an important responsive feature. You can set text sizes across all breakpoints using Edit > Object style manager> Text format. Sample text displays the changes in different views. You can also view the dynamic changes in text by moving from one breakpoint to another in Responsive project.

I am not sure if you want to center the text horizontally or vertically. So both answers: Horizontally The element you want to center .carousel-caption has a px width and margins in percentage.

You can either use percentage values only:

.carousel-caption {
    width: 70%;
    left: 15%;
}

or just make it full width, as all the contained text is centered:

.carousel-caption {
   width: 100%;
   left: 0px;
   right:0px;
}

Vertically

.carousel-caption {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

Making text responsive - HTML & CSS, I am trying to make my text -movies , tv shows , games responsive . what type=" text/css"> .bg { width: 100%; height: 110%; position: absolute;� I'm trying to make a responsive website but I cant place my text on my image perfectly without it moving somewhere. I'm a beginner just for your information. .line-1{ position: relati

Text in center with responsive images - HTML-CSS, I would make a fully responsive centered text in my image divs. The last attempt is also in my example fiddle, I tried to position it with absolute� The information in this tutorial can be used to position text, images, and other content on a web page. The examples were of an image. A div tag can be used (instead of an img tag) to position other content. The positioning can be exact or relative to something else. Use the positioning technique best suited to what you want to accomplish.

How to center image, make it responsive, and make text responsive , It would be easier if you used the Bootstrap grid. You can also remove the width: 50% and add text-align: center to your ul, but this gives a slightly weird� An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

text-align, The text-align property in CSS is used for aligning the inner content of a block element. p { text-align: center; } These are the traditional values� Responsive and pseudo-class variants. By default, only responsive variants are generated for position utilities. You can control which variants are generated for the position utilities by modifying the position property in the variants section of your tailwind.config.js file. For example, this config will also generate hover and focus variants:

Comments
  • Please share your code
  • 2 Questions: Where is your code that you tried so far? Which bootstrap are you using?
  • Sorry, i added code, but forget to save. I correct it now.
  • That's it. Thanks!