• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 37
  • Last Modified:

ASP.NET Core supporting various form factors?

Hi,

Once again coming from a beginner perspective so I can start to do some reading for curiosity.

I know that ASP.NET core web apps have to handle things to handle different screen sizes. For example a client might
browse from a phone or a PC or a tablet.

How is this detected and handled basically.

What term should I be looking for in the documentation and tutorials to see how this is approached.?

Also really to ask how difficult this is to code and handle in general.

Thanks,

Ward
0
whorsfall
Asked:
whorsfall
  • 2
  • 2
3 Solutions
 
Chris StanyonCommented:
The term you're looking for is Responsive Web Design and it's generally dictated by the styling of your website - the CSS, so it's not specific to the development language of choice, such as ASP.Net / PHP / HTML.

The default ASP.Net project in Visual Studio includes Bootstrap which is a responsive, mobile-first CSS Framework, so if you want your site to be responsive (which you should!), then start by taking a look at the docs for Bootstrap - http://getbootstrap.com/
1
 
whorsfallAuthor Commented:
Chris,

Thanks for that. Great response.

So I can therefore assume that if working on a non-mobile device like a  PC or MAC  it is designed to handle that as well?

hanks,

Ward.
0
 
Chris StanyonCommented:
Yeah. Basically, it's common practice to design your site to work on Mobiles and then scale gracefully up to the larger devices - this is what's know as a mobile first approach. With the bootstrap framework, you add classes to your elements which dictates how they're laid out on the various devices.

For example, you could have a layout like so:

<div class="container">
  <div class="row">
    <div class="col-md">
      One of three columns
    </div>
    <div class="col-md">
      One of three columns
    </div>
    <div class="col-md">
      One of three columns
    </div>
  </div>
</div>

Open in new window

This would give your layout 3 columns side by side on devices larger than 'medium' (768px wide) such as tablets / desktops, but on smaller, mobile devices they would stack one on top of the other.
0
 
Dirk StraussSenior Full Stack DeveloperCommented:
Great answer @Chris.
Ward, you may want to check out this Bootstrap Tutorial too.
1
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now