How to create the Text-box responsive

komp20 · October 29, 2016, 11:12am

Hi, I have the following problem : In my web-page I'm using a Text-box with some textual information. However whenever I shrink the window, the Textbox appears to be not responsive. Could you please help me make it responsive, i.e. to adjust to the screen resolution as window is shrinking.Here is the code:

`</p>

</div>
</div>

<p>`

jo-r · October 29, 2016, 12:34pm

First thing you need to do is learn CSS.<br /> This forum is mostly for the use of those using Bootstrap Studio website builder, it's not a basic code helping community although we do at at times do so.

Your site code above is using inline styles which means you aren't really aware of how to build a website, and without CSS knowledge you aren't going to be able to be able to create practical responsiveness at all. CSS has been around for over a decade now and you anyone trying to build a website that's trying to do so in code (not visual editors as they don't count lol), really needs to learn CSS and CSS3 first. It will save you a ton of time later if you do.

The answer to your question is that you will need to adjust the size property of your text at various screen widths using CSS. You would use a @media setting for screen size changes. The usual @media settings would be 1199px, 991px, 767px and 425px which would give you the base to start with and you an adjust those as needed. If you're unsure what any of this is, that means you aren't ready to be building a responsive website and need to learn about CSS.

There are other better ways of doing it as well using the "em" properties of sizing, but.... that's beyond my scope of teaching so you'll have to look that up.

Good luck in your venture!

hackers_84 · October 30, 2016, 6:55pm

Remove the width of 700px as it's not needed and is overwriting the responsiveness of bootstrap

As per jo's comments don't use inline styles add your styling to a custom CSS file that you can create freely within the app

saj · October 31, 2016, 6:21pm

You should almost never use inline style sheets. As for your code, your div with the class row should be inside the div with class container-fluid. Inside that should be a div with the column class and then in that should be the paragraph.

Your CSS should be in an external style sheet something like this.

.my-text{
  height:500px;
  width:700px;
  border:1px solid #ccc;
  font:16px/26px Georgia, Garamond, Serif;
  overflow:auto;
  position: relative;
  left:350px;
  top:16px;
  background-color:white;
}

However, as Chris had stated, you shouldn't be specifying a width as that goes against the fluidity of responsive design.

.my-text{
  position:relative; /* probably don't need this */
  left:350px;        /* probably don't need this */
  top:16px;          /* probably don't need this */
  height:500px;      /* probably don't need this */
  font:16px/26px Georgia, Garamond, Serif;
  background-color: white;
  border:1px solid #ccc;
  overflow:auto;
}

Your HTML should look more like this.

<div class="container-fluid bounceIn animated">
    <div class="row">
        <div class="col-md-12 my-text">
            < p>My long text in here…< /p>
        </div>
    </div>
</div>

If you need more help then this then, like Jo and Chris have stated, you need to have a better understanding of CSS and HTML.

Saj