How to make Label and Button control Responsive using CSS in ASP.Net

Last Reply on Jul 03, 2017 07:42 AM By power

Posted on Jun 26, 2017 01:22 AM

Hello there,

I was wondering if anyone would give me simple example about making asp controls responsive. I am using bootstrap in my asp master page. I created a webform called Default.aspx. Then I added asp label and asp button into the default page. when I run the app everything gets responsive but the label and the button haven't changed thier sizes (the two controls kept thier original size they had when the screen was big). What I want is how do I set up the size of my asp controls so that when the screen size/resolution changes, the controls automatically resize or scale down or up? Could you please give me a working example that has a asp:label and asp: button?  

Thank you.

Posted on Jul 03, 2017 07:42 AM

I ended up adding the following css and it works for me. I am sharing this incase it helps others. Thank you.

@media all and (max-width: 768px) {
    .responsive-width {
        font-size: 1.75vw;
    }
}   

@media all and (max-width: 600px) {
    .responsive-width {
        font-size: 2vw;
    }
}   

@media all and (max-width: 480px) {
    .responsive-width {
        font-size: 2.25vw;
    }
}