dcsimg
www.webdeveloper.com
Results 1 to 1 of 1

Thread: I think Solution to auto Adjusting is Java Script

Hybrid View

  1. #1
    Join Date
    Feb 2011
    Posts
    177

    Question I think Solution to auto Adjusting is Java Script

    Hi, I am new to CSS in some ways and old to is in others. However I am redoing my site so that it is a Responsive design. I have played around with % and Ems but it am not having any luck. Pretty much I want to font to change depending on the screen size. Max-Width: 1200px Min-Width: 300px. However no matter how I play with the fonts and div tags the font is not adjusting to the screen sizes any ideas or suggestions on how to do this. I think maybe you have to incorporate Java Script (No clue on that) Any suggestions or hits are much appreciated. (The code below is like the 5th or 6th time playing around with it so it may be all messed up by now lol! Cool I attached a photo of what I am sort of trying to do with CSS but I want that to be the same on different screen sizes.

    Header.png

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <link href="Header.css" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
    <style type="text/css">
    {
    	@import url(<a href="http://fonts.googleapis.com/css?family=Fjalla+One" rel="nofollow">http://fonts.googleapis.com/css?family=Fjalla+One</a>);
    	@media screen and (min-width:300px) and (max-width: 1200px)
    }
    </style>
    </head>
     
    <body>
    <div id="body">
        <div id="header"></div>
        <div id="main">
            <div id="content-1">Light</div>
            <div id="content-2">
              <div id="content-2-1">Of</div>
                <div id="content-2-2">Life</div>
            </div>
        </div>
        <div id="footer">Photography.net</div>
    </div>
    <div id="min">Content for  id "min" Goes Here</div>
    </body>
    </html>
    <code>
    #body {
    	width: 100%;
    	min-width: 300px
    	font-family: 'Fjalla One', sans-serif;
     
    }
    #content-1 {
    	float:left;
    	font-size: 3em;
    	color: #ABBC6B;
    	font-weight: bold;
    	margin-left: 2px;
    	margin-top: 15px;
    	width: 35%;
    }
    #content-2-1 {
    	float:left;
    	font-size: 2.75em;
    	font-weight: bolder;
    	color: #D6CDBE;
    	margin-top: 35px;
    	padding: 2px;
    	width: 20%;
    }
    #content-2-2 {
    	float:left;
    	font-size: 3em;
    	color: #ABBC6B;
    	font-weight: bold;
    	margin-left: 25px;
    	margin-top: 25px;
    	width: 40%;
    }
    #footer {
    font-size-adjust: .59;
    	font-weight: bold;
    	color: #E7AC5C;
    	width: 100%;
    	min-width: 300px;
    	text-align: left;
    	float: left;
    	padding-top: -10px;
    	margin-top: -35px;
    }
    #min {
    	float: left;
    	width: 300px;
    	border: thin solid #000;
    }
    Last edited by shutterbug; 02-19-2013 at 01:30 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles