Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to set up proper CSS 3 for a website

Posted on 2014-01-27
5
Medium Priority
?
446 Views
Last Modified: 2014-02-20
I am looking to set up a proper design spec for a website, but I do not want mobile browsers to have a problem viewing the web site.  I know that if the page is too wide, problems may surface for viewers to view a page and so and so forth.  How could I set up the website so that it is viewable in any browser in any sized screen?  Is there a CSS/HTML template to start from?  Is there a framework that most people use?  Just like most popular websites, I want the top banner to be 100% wide in the screen but as far as the rest of the site content, I would like it to take up some space but not 100% width.  Can anybody help me on this so that I could get started on this right away?  Thanks!
0
Comment
Question by:VBBRett
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 668 total points
ID: 39814164
There are several you can look at

Bootstrap and boilerplate are both widely used mobile first / friendly templates.

Bootstrap (http://getbootstrap.com/)

Boilerplate (http://html5boilerplate.com/)
0
 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 668 total points
ID: 39814217
At the heart of what you are asking about is using media queries. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
.myStyle{width:50%}
@media (max-width: 700px) {
.myStyle{width:100%}
}

Open in new window

The code above would make an item's width 50% on a large screen and 100% on the small screen.  

Setting up for multiple viewports on one page will take some work.  I prefer to use libraries like bootstrap http://getbootstrap.com/ and foundation http://foundation.zurb.com/

Both have the basic css/grid ready to go along with javascript/jquery helpers.  The responsive grid is the heart. Instead of writing media queries, they are done for you and all you need to do is apply a class
<div class="row">
  <div class="col-sm-12 col-md-3">Narrow Left Large screen/full width small screen</div>
  <div class="col-sm-12 col-md-9">Wide right Large screen/full width small screen</div>
</div>

Open in new window

Check out the examples and you can get a better idea.
http://getbootstrap.com/getting-started/#examples
http://foundation.zurb.com/learn/website-examples.html

Both foundation and bootstrap are similar, if you like to use template themes,  you will find more written against bootstrap.
0
 
LVL 18

Assisted Solution

by:bruno
bruno earned 664 total points
ID: 39819848
Bootstrap, boilerplate are all good starting points for your code, but you want might to start with some general knowledge of responsive web design, which is the concept of using fluid grids, flexible images, and media queries.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39875307
I've requested that this question be closed as follows:

Accepted answer: 168 points for padas's comment #a39814217
Assisted answer: 166 points for brunobear's comment #a39819848
Assisted answer: 166 points for julianH's comment #a39814164

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

610 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