WebsiteGear Logo Log In
New User? Sign Up
About | Contact | FAQ
Home Discussion Forums Website Development Website Design
New Post New Post | Report Abuse Report Abuse


How to develop a Flxexible Web Design
Post by jorgepson on Mar 5, 2013 1:24:36 AM CST


Here's what i found in developing a flexible and responsive web design

@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}
Or as part of an@import directive:
@import url("shetland.css") screen and (max-device-width: 480px);

Adapt, respond, and overcome

Let’s turn our attention to the images at the base of our page. In their default layout, the relevant CSS currently looks like this:

.figure {
float: left;
margin: 0 3.317535545023696682% 1.5em 0; / 21px / 633px /
width: 31.121642969984202211%; / 197px / 633px /
}li#f-mycroft,
li#f-winter {
margin-right: 0;
}
linearize the page let's say 600px
@media screen and (max-width: 600px) {
.mast,
.intro,
.main,
.footer {
float: none;
width: auto;
}
}
source: http://www.gather.com/viewArticle.action?articleId=281474981856250
sample responsive web design


Submit To Slashdot Slashdot | Submit To Digg.com Digg | Save in del.icio.us Del.icio.us | Submit To Reddit Reddit
REPLIES & COMMENTS Post a Reply
LATEST FORUM POSTINGS
Nav How to develop a Flxexible Web Design | Mar 5, 2013
Nav Website comments on updates / improvements please | Feb 28, 2013
Nav WebsiteGear Introduces Unlimited Web Survey Plan | Dec 4, 2012
Nav HTML TAGGING PROJECT CONVERSION 100% QUALITY | Nov 28, 2012
Nav Backup Your Files, Photos, Music online For Free | Nov 25, 2012
Nav 5 common link building mistakes | Aug 27, 2011
Nav How to convert psd into html? | Jan 15, 2011
Nav How to choose the right PHP Framework for web deve | Jan 12, 2011
FORUM SEARCH

FEATURED NEWS | POPULAR NEWS
Submit News | View More News View More News