how to make static page responsive??

Question

I am tying to make html file responsive but I have problem that when I change the width to 90% it make webpage and make portfolio seaction go to far right and content section to far left with gab between section. what aima trying to do is make web page fixable? I add link to fiddle js for may static page http://jsfiddle.net/aElnajjar/YJA9E/

My CSS after I add persent

@@ -1,7 +1,7 @@
 @charset "utf-8";
 /* CSS Document */

-
+* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
 /*reset css*/
 article, aside, figure, footer, header, hgroup, nav, section { 
        display:block; 
@@ -17,6 +17,8 @@ article, aside, figure, footer, header, hgroup, nav, section {
        line-height: 20px;
        color: #5F5E59;
        background: url(images/bg_body.jpg) left top repeat;
+       width: 100%;
+

    }
    a:link, a:active, a:visited {
@@ -35,28 +37,26 @@ article, aside, figure, footer, header, hgroup, nav, section {
        margin-bottom: 25px;
    }
    #block-twitter {
-       width: 700px;
-       height: 60px;
-       position: relative;
+       width: 90%;
        margin: 0 auto;
        padding: 20px 200px 0 0;
+       float: right;
+       
    }
    #block-title {
-       width: 900px;
-       height: 80px;
-       position: relative;
-       margin: 0 auto;
+       width: 90%;
+       position: right;
        padding-top: 25px;
    }
    #main-content {
-       width: 900px;
-       position: relative;
+       width: 90%;
+       position: right;
        margin: 0 auto;
    }
    footer {
-       width: 900px;
-       position: relative;
-       margin: 0  auto;
+       width: 90%;
+
+   
        clear: both;
        padding: 30px 0;
        background: url(images/img_star.png) left top repeat-x;
@@ -73,6 +73,8 @@ article, aside, figure, footer, header, hgroup, nav, section {
    font-style:italic;
    font-size:14px;
    text-shadow: 0 -1px 0 #0000;
+   width: 90%;
+
 }

 #block-twitter span.tweet-time {
@@ -301,6 +303,4 @@ section#portfolio {
        box-shadow: 1px 1px 2px #999;
        clear: both;

-   }
-
-   /* -------- */
+   }
\ No newline at end of file

I'm not sure I understand. Do you want it to be dynamic with animations and popups and things like that, or do you want it to be dynamically-sized? — John Davis, Jun 07 '13 at 02:46
I am try to implement responsive design I need to change it from static to fluid template type — , Jun 07 '13 at 02:52

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

Many of your divs have fixed widths (eg #block-title 900px, #main-content 900px ) so this will block any responsive behaviour.

You could try using percentages instead of fixed width values. In practice you may have to combine this approach with the use of media queries to further customise the layout based on the visitor's viewport

Another option if you haven't already considered it, is using one of the many good responsive frameworks, for example Bootstrap or Foundation. Once you get up to speed with them they will save you a huge amount of time and give good, cross-browser results.

Good luck!

edited May 23 '17 at 12:04

Community

1
1

answered Jun 07 '13 at 02:59

David Taiaroa

25,157
7
62
50

are their away to change it percentages? – Jun 07 '13 at 03:06
Please don't use **is.gd** links or other tricks to get around the jsfiddle rules. I've removed the link entirely because **is.gd** links hide where the user is being taken. – Duncan Jones Nov 10 '13 at 19:16

how to make static page responsive??

1 Answers1