I found a site that will check to see if your webpage is mobile-friendly (mobile-compatible) and, if it isn't, tell you what you need to fix so that it is.
http://validator.w3.org/mobile/
It's really cool, and I think it's helped me begin to fix my site! :)
Tuesday, May 28, 2013
Friday, May 24, 2013
Twitter Bootstrap
I think I've figured out Twitter Bootstrap. It's kind of complicated, though, and I don't 100% understand everything I've done with it. I think I've found a better tutorial at http://www.revillwebdesign.com/twitter-bootstrap-tutorial/
I'll run you through what I've done so far, though. First thing is you have to download bootstrap and extract the files. Once you've done that, you move the extracted files into whatever folder you'll be working out of. For example, I made a directory in my public_html called bootstrap and placed the extracted files in there. After that, you don't have to touch them.
I made an index.html that I was working with. In that index.html file, I copied and pasted the HTML and CSS code from my blog (the awesome one with the lion on it) so I could work with that. This is what the beginning of my HTML looked like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
I'll run you through what I've done so far, though. First thing is you have to download bootstrap and extract the files. Once you've done that, you move the extracted files into whatever folder you'll be working out of. For example, I made a directory in my public_html called bootstrap and placed the extracted files in there. After that, you don't have to touch them.
I made an index.html that I was working with. In that index.html file, I copied and pasted the HTML and CSS code from my blog (the awesome one with the lion on it) so I could work with that. This is what the beginning of my HTML looked like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
If you didn't notice, what I added in there is the <meta name="viewport" content="width=device-width, initial-scale=1.0"> . That does something to the width so that the width of the page changes depending on the size of the device viewing it. Make sense?
<style>
@import url(style.css);
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</style>
What I added in there was the <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> which also helps with the resizing of the web page based on the width/height of the device it is being viewed on.
That's all I did! This is what the webpage looked like on my iPhone BEFORE the responsive CSS:
This is what is looks like NOW:
As you can see, it looks weird. HOWEVER, do you see the difference in the size of the text? That's soooo much progress. My personal CSS is somehow conflicting with the CSS that bootstrap provided me, so I have to go in and see what I can do. Maybe this new tutorial can help??
Tuesday, May 7, 2013
I DID IT!
I FINALLY figured out how to get my header to look normal! I googled CSS positioning and also looked through the online book I'm studying, and it helped me out!
Here's what my CSS looked like at first:
header {
position: fixed;
margin-right: 2%;
}
I thought the fact that I had display: table; was messing it up, but what I found out was SO simple, it hurts. Here's my new CSS:
header {
position: fixed;
right: 2%;
}
THAT'S IT. All I had to do was take out the margin! Now, this is what it looks like:
Here's what my CSS looked like at first:
header {
position: fixed;
margin-right: 2%;
}
I thought the fact that I had display: table; was messing it up, but what I found out was SO simple, it hurts. Here's my new CSS:
header {
position: fixed;
right: 2%;
}
THAT'S IT. All I had to do was take out the margin! Now, this is what it looks like:
Friday, May 3, 2013
Good week
I figured out how to get my header to stay where it is:
header {
position: fixed;
}
The only problem is, when I fix the position, it moves the header over so that not all of it is visible. I'll show you:
BEFORE
AFTER
See what I mean? It's annoying and I haven't yet figured out how to fix it. I think it has something to do with the fact that I have
header {
display: table;
}
in my CSS. Maybe not, but that's all I can think of. Everything is valid, so it's not some discrepancy that is messing everything up. Any ideas?
header {
position: fixed;
}
The only problem is, when I fix the position, it moves the header over so that not all of it is visible. I'll show you:
BEFORE
AFTER
See what I mean? It's annoying and I haven't yet figured out how to fix it. I think it has something to do with the fact that I have
header {
display: table;
}
in my CSS. Maybe not, but that's all I can think of. Everything is valid, so it's not some discrepancy that is messing everything up. Any ideas?
Subscribe to:
Posts (Atom)