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

Responsive web design code for mobile devices

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
FreddyBass
Asked:
FreddyBass
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
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
 
FreddyBassAuthor Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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
Tackle projects and never again get stuck behind a technical roadblock.
Join Now