Solved

Responsive web design code for mobile devices

Posted on 2014-01-25
3
258 Views
Last Modified: 2014-02-16
I have a webpage that I am creating and am trying to find the proper code for having it display properly on any device.  So that the page will be responsive based on what the screen size it is trying to display on.  Any direction would be greatly appreciated
0
Comment
Question by:FreddyBass
  • 2
3 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39808925
I use bootstrap and foundation.  http://getbootstrap.com/ and  http://foundation.zurb.com/

Everything is set up for you and you just need to use classes like below that would create stacked rows for a phone and two equal columns for everything else.

<div class="row">
   <div class="col-xs-12 col-sm-6">stuff</div>
  <div class="col-xs-12 col-sm-6">stuff</div>

</div>

Open in new window


Some examples
http://getbootstrap.com/getting-started/#examples
http://foundation.zurb.com/learn/website-examples.html
0
 

Author Closing Comment

by:FreddyBass
ID: 39862656
Thank you for your input Scott, it was not exactly what I was looking for but it gave me some info to get going in the right direction.  Thank you for taking the time to give me your suggestions.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39862824
What is it you are looking for?  The core of making a responsive site will be using media queries where you define a class for multiple screens.  You can spend a lot of time doing this from scratch.... or you can use bootstrap or foundation or even 960.gs.  These libraries are not meant to be your template, they just make it easier by not having to reinvent the wheel.


https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
<!-- CSS media query within a style sheet -->
.container{width:100%;}
@media (max-width: 700px) {
  .left_side {
    width: 100%;
  }
  .right_side {
    width: 100%;
  }
}

@media (min-width: 701px) {
  .left_side {
    width: 30%;
  }
  .right_side {
    width: 70%;
  }
}
<div class="container"
<div class="left_side">I will be full width if the viewport is 700px or below and 30% width if the viewport is 701px or more</div>
</div class="right_side">I will be full width if the viewport is 700px or below and 70% width if the viewport is 701px or more</div>
</div>

Open in new window

0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Selecting Right Partition 6 69
Load data upon clicking a button 8 35
AWK: digits < 10 add a zero how? 11 26
asp.net open new page without popup blocker 8 19
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question