Wai Yan Hein Wai Yan Hein - 22 days ago 6
CSS Question

Responsive text input beside image with fixed size in html css

I am developing a website. Now I am beautifying my website. Frankly, I am not good at front-end. Now I am having a problem with designing my website.

This is something what I want to achieve

enter image description here

As you can see in the higlighted area, there is a image and textarea in the div. I want to get it responsive. I mean, it will have the max-width, when the user low down the screensize, it will become smaller, but it has min-width. I mean the parent div is not fixed size. It will be changing. But I always want them stay side by side. But the image will always have fixed size. It will never change no matter screen size is changing. But only the text input field will be responsive according to the parent. Please have a look at my code below.

This is my html

<div>
<div class="comment-form">
<img class="comment-avatar" src="/Images/user_avatar.png" />
<textarea placeholder='Please log in first' class="comment-textarea"></textarea>
</div>
</div>


This is my css

.comment-form{
padding:5px;
border:1px solid #CFD8DC;
width:100%;
min-width:280px;
max-width:490px;
}

.comment-avatar{
width:60px;
height:54px;
object-fit:cover;
border:1px solid #CFD8DC;
}

.comment-textarea{
width:86%;
display:inline-block;
border-radius:0px;
height:54px;
}


As you can see in the css, I am making comment-form responsive setting width to 100% with min-width and max-width. The avatar image will have the fixed size. The problem is setting the width of the textarea. I always want image and textarea side by side. I want textarea takes the rest of the form area. So I set its width with percentage. As you can see, now width is 86%. If I set it to 100%, form became something like below.

enter image description here

But with current code, I get like the first image. But when I resize the screen, it becomes something like this.

enter image description here

They are not side by side anymore. So my current code is not responsive. What I want to make is I want image always fixed side and want textarea takes the rest or remainng area of form-container no matter what screen size is changed to. Please how can I achieve it? Please correct my code. Please help me.

Answer

Maybe , this helps... i just added box-sizing and used calc to calculate width of text area

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;
    max-width:490px;
    box-sizing: border-box
}

.comment-avatar{
    width:60px;
    height:54px;
    display: inline-block;
    border:1px solid #CFD8DC;
    box-sizing: border-box;

}

.comment-textarea{

    width: calc( 100% - 70px);
    display:inline-block;
    border-radius:0px;
    height:54px;
    display: inline-block;
    box-sizing: border-box;

}
<div>
    <div class="comment-form">
         <img class="comment-avatar" src="https://upload.wikimedia.org/wikipedia/en/7/71/SmallTownSouthernMan.jpg" />
         <textarea placeholder='Please log in first' class="comment-textarea"></textarea>
    </div>
  </div>