asked on

How to change the Asp.Net web page based on the browser width.

Hi,
I want to change the web page based on the browser width(responsive web design).The web page has header,footer,left menu, right menu and center content.
The below css are for widescreen(Desk Top or LapTop)as follows:I want to change the css based on current browser width(mobile phone,iphone,ipad etc.,)

Please let me know how to do this.How to set the the below css classes for different browser widths.
#rightcolumn
{
width:180px;
                                    padding:0px;
                                    margin:10px;
                                    float:left;
                                    background-color:transparent;
                                    font:11px Arial;

}

#leftcolumn
{
clear:left;
width:195px;
padding:0px 0px 10px 0px
margin-top:10px;
margin-left:10px;
float:left;
background-color:#fff;
font:11px Arial;

}

#center
{

width:543px;
padding:0px;
margin: 0px;
float:left;
background-color:#fff;
overflow: visible;
font:12px Arial;

}

The above 3 are inside the container.It's width: 962px
#Container
{
margin-left: auto;
      margin-right: auto;
      width: 962px;

}

The header and footer widths are as follows:
#header
{
width: 962px;
height:99px;

}
#footer
{
width: 962px;
height:99px;

}

Thanks

SOLUTION

COBOLdinosaur

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

ASKER CERTIFIED SOLUTION

darjimaulik

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

KavyaVS

ASKER

Hi darjimaulik,
for max-width:700px I am trying to declare the static widths as follows:
Is it ok to declare like this.

@media screen and (max-width:700px)
{

#rightcolumn
{
width:180px;
padding:0px;
margin:10px;
float:left;
background-color:transparent;
font:11px Arial;

}

#leftcolumn
{
clear:left;
width:195px;
padding:0px 0px 10px 0px
margin-top:10px;
margin-left:10px;
float:left;
background-color:#fff;
font:11px Arial;

}

#center
{

width:240px;
padding:0px;
margin: 0px;
float:left;
background-color:#fff;
overflow: visible;
font:12px Arial;

}

#Container
{
margin-left: auto;
margin-right: auto;
width: 700px;

}

The header and footer widths are as follows:
#header
{
width: 700px;
height:99px;

}
#footer
{
width: 700px;
height:99px;

}

}

If the web page has images with specific dimentions what to do with that.
Any suggestions please.

Thanks.

SOLUTION

darjimaulik

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

KavyaVS

ASKER

Hi darjimaulik,
Thanks for the information.
Instead of using the device width,I want to change the styles based on current width of the browser window.If the page is resized it has to show the corresponding styles based on browser width.

Can you plese give me any useful information related to this.

Thanks

SOLUTION

darjimaulik

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

KavyaVS

ASKER

Hi darjimaulik,
Thanks for the help.
Whenever the page is resized,I want to know the browser width,then
based on the browser width I will assign the % widths for rigth column ,left column and center content.

I will make it more precise and clear.I have 2 questions.

1.Can we get the browser width dynamically,whenever the user resize the page.
2.Can we pass the browser width to css and setting styles based on the browser width.

Please let me know.

Thanks

SOLUTION

COBOLdinosaur

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

KavyaVS

ASKER

Thanks Cd&
I got answer for my 1st question.

Any advise for 2nd question please.
2.Can we pass the dynamic browser width we got from the java script function to css file and setting styles based on the browser width.

Thanks

SOLUTION

COBOLdinosaur

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SOLUTION

darjimaulik

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

KavyaVS

ASKER

Thanks