How can I fit a input in maximum width of document?

Question

I'm trying to make a form row with input and text, I trying to fit a input in maximum width of document but this doesn't work

Any Solution for this ? and how to use media queries for this form? Thank You

.comment {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid #efefef;
}

.com-row {
  width: 100%;
  min-height: 50px;
  flex-wrap: wrap;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.txt {
  width: 550px;
  min-height: 50px;
  margin: 0 5px;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  border: none;
}

<div class="comment">
   <div class="com-row">
      <input type="text" class="txt">
      <h4>Post</h4> 
   </div>
</div>

I think everything is fine in your code. In mobile, input is responsive only. — Rafee Shaik, Oct 26 '20 at 16:54

score 2 · Answer 1 · answered Oct 26 '20 at 16:28

2

It looks like the input is going off screen because you have set the input width to 550px, so when you get to mobile, the width will be smaller. You will most likely use percentages or use a media query

.txt {
    width: 50%;
}

answered Oct 26 '20 at 16:28

Sean Pelser

99
9

score 1 · Answer 2 · answered Oct 26 '20 at 16:26

To make elements responsive use percentages for width instead of pixels. But no matter how much you hate media queries, you are going to need to adjust that percentage in small screens

.txt {
  width: 20%;
  min-height: 50px;
  margin: 0 5px;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  border: none;
}

@media only screen and (min-device-width: 360px) and (max-device-width: 530px) {
  .txt {
    width: 60%
  }
}

score 1 · Accepted Answer · answered Oct 26 '20 at 16:29

I believe you will get a result closer to how you are expecting by setting the children of the flex box to flex: 1; . I also removed the display: flex; from the input.

As such, I was able to get a better result using the following.

    .comment {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    flex-wrap: wrap;
    flex-direction: row;
    border: 1px solid #efefef;
}

.com-row {
    width: 100%;
    min-height: 50px;
    flex-wrap: wrap;
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.txt {
    width: 550px;
    min-height: 50px;
    margin: 0 5px;
    background-color: red;
    flex: 1;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    border: none;
}
.com-row h4 {
    flex: 1;
}

score 1 · Answer 4 · answered Oct 26 '20 at 17:04

I have rewritten the code and trimmed off unnecessary codes to make it neater. If i have understood your requirement precisely (I think you need a comment box and you would be replacing the post button)

<div class="comment">
    <input type="text">
    <div>
        <h4>Post</h4>
    </div>
</div>

<style>
    .comment {
        width: 100%;
        height: 50px;
        border: 1px solid #efefef;
    }
    .comment>input{
        width: calc(100% - 110px);
        display: inline-block;
        min-height: 50px;
        background-color: red;
        border: none;
    }
    .comment div{
        height: 50px;
        width: 100px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex: 1;
    }
</style>

I have made the button part with static width and the box would adjust based on screen width. You may adjust button width but make sure you make changes to the input width too. Like calc( 100% - div_width-10 ).

How can I fit a input in maximum width of document?

4 Answers4