How to create a web application suited for desktop and mobile

Vipin Kumar
Vipin Kumar used Ask the Experts™
on
Hi,

I am creating a web application, but the user's may access the web application via Desktop as well as mobile.

I am using Bootstrap to design the interface.

My question how shall I differentiate the code for mobile and desktop. I know I can use the grid system of Bootstrap, but the issue comes up many things for example lists i.e. for desktop I am using inline list but when I open on mobile that inline gets distorted. I want to achieve is that when I access the web application in desktop  it should show an inline list but when I open on mobile it should open on mobile it show as unordered list.

Kindly let me know if any more information is required.

Thanks in advance.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010

Commented:
I believe Bootstrap handles inline lists with list-inline
Vipin KumarSr. Network Engineer

Author

Commented:
Yeah... but when I open it on my mobile the inline list gets distorted. I want that on Desktop it should show as inline list, but on mobile it should show as unordered list
Freelancer
Top Expert 2010
Commented:
Use media queries: Since Bootstrap is a 'mobile-first' platform, you can just style your list as an unordered vertical list. Then, you have to create  media-query for all device with  width equal to or greater than, for instance, 750px:
li{
    display: inline-block;
}
@media only screen and (min-width : 750px){
  li{
    display: block;
  }
}

Open in new window


This way, all devices with  display width up to 750px will show an inline list whereas all other displays will serve vertical list. Obviously, is up to you setting the correct display width: it should be 320px, 480px or some else value.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial