Responsive web design

Question

I have developed my own introductory website in ASP.NET. I have used only HTML and CSS as I am not good in website designing. But the website is not looking good on mobile phone browser. Can anybody suggest me how can I use/update the same code so that it looks fine in mobile phone browser also without using bootstrapping explicitly?

My website link.

if somebody is unsatisfied with the question then please add a comment to make it more clear instead of down voting it. — kaushal sanadhya, Jan 29 '17 at 18:52

score 2 · Accepted Answer · answered Jan 29 '17 at 18:38

2

Asp.NET has nothing to do here with Responsive Web Design.

Just create CSS correctly that sets the elements where you want them according to the resolution and your good to go.

To target specific resolution use media queries: resolution

@media screen and (min-width: 480px) {
  a {
    color: red;
  }
}

answered Jan 29 '17 at 18:38

Paweł Łukasik

3,893
1
24
36

I have already developed the code .Is there any way to convert the same code so that website become responsive?Some tool etc.. – kaushal sanadhya Jan 29 '17 at 18:41
1

He provided you the CSS you need to make the site responsive. Use Developer Tools (F12 on your keyboard) to resize the page to watch what happens to your site as you make it smaller. Add "media break points" like the one provided above to change the styles of your site to fix anything that looks bad. I highly recommend you read a few articles on responsive design. You should also design your site with mobile in mind, and create at least 2 mockups in Photoshop, Mobile and Desktop size so you have a clear goal when changing your CSS. – Sean Kendle Jan 29 '17 at 18:48

score 0 · Answer 2 · answered Jan 29 '17 at 18:42

0

Also you can use your browser developer tools to see how your page looks in different screen sizes

answered Jan 29 '17 at 18:42

krlos77

331
5
13

you are not getting my point!!I have already developed the whole website now is there any way to "convert" it into responsive website? – kaushal sanadhya Jan 29 '17 at 18:44

score -1 · Answer 3 · answered Jan 29 '17 at 18:50

Even if you do not want to use bootstrap or foundation, looking at their CSS to see how it operates is how I first learned to create responsive pages.

The core of bootstrap is referencing the page width as Pawel Lukasik mentioned above. At it's simplest above a certain width will have 1 style and below a certain width it will have another that determines the postioning / widths / floats of that content on the page.

In the case of bootstrap they have identified these various styles using the various 'grid options' http://getbootstrap.com/css/#grid-example-basic

score -1 · Answer 4 · answered Jan 29 '17 at 23:14

I suggest you take a look at the following link. It will give you a rundown on media queries that are used in CSS for responsive design. As mentioned above it is also a very good idea to take a look at the code for Bootstrap. It will give you an idea if how it achieves responsiveness, you can then try to create your own CSS to achieve the desired outcome.

Responsive web design

4 Answers4

Linked