keytone Posted January 10, 2015 Share Posted January 10, 2015 (edited) Hi everyone! Yep, I'm back again with a new question. I've been looking for a way to get my page adjust to the viewer's screen size and I think I've found it. Using some code I got from a bootstrap basic template ( not all of it, just some ) to adjust my page to fit larger screens. I haven't tried it with smaller screens yet, since I don't have access to one, but I'm pretty sure it will work. My screen is 1366px width and that is what I was looking at when I wrote the pages. The problem I was trying to avoid thinking about but now face is : I have many, many pages...my whole site! There's not much code and copy&paste is simple, but the number is daunting! Here is the code that I put in the <head> section: <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> and this is the code I have in the <body>: <div class="container-fluid"> <center> <a href="/military/mm/mm1home.html"><img src="/military/mm/mm7.png" border="0"> </center> </div> </div> so, the whole thing looks like this: <html> <head> <title>bootstrap test pg.7</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <style> body{background-color: green; font-size: 20px; color: red; } </style> </head> <body> <center> Click the picture to return <div class="container-fluid"> <a href="/military/mm/mm1home.html"><img src="/military/mm/mm7.png" border="0"> </div> </center> </body> </html> The page: http://jdsplace.us/military/mm/mm7.html I'm hoping there is an easier way to update all of my pages without going to each one of them, but I can't even imagine how! Oh well, thanks if you can suggest something. Thanks anyway if you can't. By the way, I don't mind being chuckled at, i've posted some goofy questions. keytone Edited January 10, 2015 by keytone Link to comment Share on other sites More sharing options...
Ingolme Posted January 10, 2015 Share Posted January 10, 2015 Your page only consists of an image. Just give a classname to your images and then set max-width to 100% .responsive { max-width: 100%; height: auto;} If you're using Bootstrap then just give the class img-responsive to your images. Bootstrap also has a built in columns system which will adapt to different screen sizes, read about it here: http://getbootstrap.com/css/#grid You should make sure your code is valid if you want it to work properly in all browsers. http://validator.w3.org/check?uri=http%3A%2F%2Fjdsplace.us%2Fmilitary%2Fmm%2Fmm7.html Link to comment Share on other sites More sharing options...
keytone Posted January 10, 2015 Author Share Posted January 10, 2015 (edited) Thanks a million, I new you could make it simple! I guess I'll have to resign myself to doing each "already written" page one at a time. Edited January 10, 2015 by keytone Link to comment Share on other sites More sharing options...
davej Posted January 10, 2015 Share Posted January 10, 2015 I've been looking for a way to get my page adjust to the viewer's screen size and I think I've found it. I don't know anything about Bootstrap, but the typical approach is to use percent widths on elements, and use media queries, and the viewport. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now