How to resize panels when changing browser size

Question

I wrote my first aspx app, and used bootstrap. I did the standard technique using container and row classes.
Here's a snippet:

<div class="container">
    <div class="row">
        <div class="col-lg-8" style="float: left;">
             <asp:Panel ID="Member_Panel" runat="server"></asp>
             .... bla bla....
        </div>
    </div>
</div>

It all looks great if the browser is maximized, but if I resize the browser with a smaller width, say, 992px, then the panels look awful and inherit bizzaar sizes.
Is there a way to lock the controls and sizes?
Or should I do it differently?

Answer 1

Hi @CoreyFleg-6304,
You have used container and grid.They are responsive. You shouldn't use fixed width.You need use relative width and height such as percent.
You could use .container-fluid.This means 100 percent of the layout. And "col-lg-12" means you divided the content into 12 parts. And if you use 50% width of the textbox, the textbox' width will to be 50% of the content. And the percent is responsive.
Best regards,
Yijing Sun

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi @Coreysan ,
Bootstrap is responsive by default. You could add meta tag and css. Just like this:
112757-new-text-document-5.txt
Best regards,
Yijing Sun

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

Thank you so much for your advice. Since I'm new to this, I am grateful to learn all I can.

I included the meta tag for the viewport, and that helped. I'm using bootstrap 4.5.2, but I'm not using bootstrap-responsive.css.
The screen looks better when resizing, so my only followup question is this:

When I designed the main page at maximum size, I placed panels first, and then put textboxes inside the panels for both display and user input.
To make it look nice, I hard-coded the width of the text boxes. So now, if I resize the browser, the panels will adjust in size, but the text boxes will not. They preserve
the width I coded. Here's a snippet:

<asp:Panel ID="Charges_Panel2" runat="server" width="50%">
   <div style="float: left; margin: 3px 10px 0 10px; width: 350px;">
      <asp:Label ID="lbl_Billed" runat="server" Text="Total Billed Charges:"></asp:Label>
      <asp:TextBox ID="txt_Billed" runat="server" CssClass="ShiftRight" Width="170px"></asp:TextBox>
   </div>
</asp:Panel>

What should I study or learn to make the textboxes adjust in size as well, if possible?

Answer 4

Thank you! I was wondering about that! :)
Okay - I'll get to work!
COrey