4 - Making your site responsive


Questions & Comments

Sal Moraitis - 6 months ago

Hi Dan, I have created a basic site in HTML and followed your instructions in CSS exactly how you have done it. However nothing changes in the browser and my site is still not responsive. Any ideas what I might be doing wrong?

Administrator Tayla Coman - 6 months ago

Hi Sal, sorry but the details you've supplied aren't really enough to help me diagnose the issue. Would you like to upload your whole site to Dropbox and then send me the link so I can take a look? This will make it much easier for me to diagnose the issue.

Sal Moraitis - 6 months ago

Hi Tayla, Thanks for the fast response! I have just sent you my compressed website file via Dropbox. Look forward to hearing back.

Administrator Tayla Coman - 6 months ago

Okay cool, pretty easy fix! So Sal, the issue is, that you have set widths on the container ID so the media queries aren't going to work properly. You either need to remove set widths (set widths are the bad guy here) or change your width's to 'max-width'. I just completed removed the widths and it seems to have fixed it for the most part.

Administrator Tayla Coman - 6 months ago

if you'd like a link to the dropbox with the fixed width's then email me at tayla@byol.ie. But I think you'll be able to do it! I think there's about 3 lines in your CSS that need to be removed which are simply defining widths.

nikkii gere - 5 months ago

hello ! when i previewed the site everything appeared fine ~ now that i have uploaded it to the server, i don't have the mobile view ( tablet works fine) . i'm posting the error & code below. thoughts ? thx nikkii i'm getting the following error code : Expected RBRACE at line 113, col 1. ... line 113 is : @media (max-width: 400px) { ... the full code for the mobile view is : /*mobile view*/ @media (max-width: 400px) { .slicknav_menu { display: block; } #menu { display: none; } .col-sm { width: 100%; } .subheading { color: #3B3B3B; font-weight: 700; font-size: 32px; margin-bottom: -35px; } h1 { color: #000000; font-family: 'Roboto Slab', serif; font-weight: 100; font-size: 40px; margin-bottom: -5px; } }

Administrator Tayla Coman - 5 months ago

Well RBRACE means "Right bracket" - as in '}', is there a media query above this media query that hasn't been closed yet? Have a look for a missing bracket.

Molly Papier - 4 months ago

Hey Dan, Is it really easier to read when you isolate all the stuff from the {'s? I'm seeing all those floating around & it's kinda confusing? Would it be easier for me if I tightened them up...to see what { goes with what? I figured out the other issue I posted about before (html/css being the same. It was the menu bar...I wasn't seeing that I need to be on 'source code' to see my index.html page. I kept seeing the css page!)

Administrator Daniel Scott - 4 months ago

Awesome that you've fixed your issue and found the source code. Nice work. As for readability. That is really up to you. Know that as you work more and more in code the { & } get easier and easier to deal with.

Duong Ky Lan - 4 months ago

Hi Dan, I completed your "Coding your first web using Dreamever 2017". It is responsive correctly on Chrome/M. Edge screen but it is not responsive correct when I browse on real smartphone. I tested on iPad mini, Windows Phone and iPhone. Please let me know your email address so I can send you the dropbox link. I uploaded and the website is here: www.daydanpianophumyhung.com Text in the Menu are slightly different but I don't think it affect the responsive issue. Could you check and advise. REeards, Lan

Duong Ky Lan - 4 months ago

I check every single line and compare with Dan's version, found no errors! Then I uploaded Dan's files to my hosting server, same not responsive when browse on smartphones of any kinds/screens. Please advise what I do more to tackle this. Is there any thing I can do on the hosting server. My host is at Hostgator.com THanks/ Lan

Administrator Tayla Coman - 4 months ago

Hmmm I can't seem to recreate your issue. I'm viewing on an iPhone 6 and don't have any issue with your site. But you are having console errors with getting bootstrap.css and style.css. why do you have a link to style.css and styles.css, and your bootstrap.css is coming after your style.css link which is a big no-no. Always have your bootstrap linked first. Make these changes and check your phone browsers again.

Shahniza Ahmed - 3 months ago

I'm having problems copying and pasting. The code is not pasting in dreamweaver?

Administrator Tayla Coman - 3 months ago

Hi Shahniza, this is weird sounding... you're running all the latest Dreamweaver software?

Video Transcription

Hey, welcome to this video, and, in this one, we're going to be learning what responsive web designing is, and how to do it using something called a media query.
So, what we'd like to do is, when the screen adjusts to different sizes-- I'm just going to drag this as an example, but what we're trying to do is, get it somewhere that looks-- on tablet, it looks like something, and when it's a mobile, it looks different, and when it's a desktop, it all looks different. And that's responsive, it's responding to the screen size. So that's what we're going to do in this video. So let's jump to the Dreamweaver.
So, on our last video, we just put in some real basic ‘h1’ in the HTML, and then we styled it in our CSS. Now, we get to look at responsiveness.
So, what we're going to do is, we're going to do something called Desktop first, our CSS. Now, a lot of people do mobile first, and they'll start styling their mobile screens first, because it can be the hardest screen to design for, because it's so small. And what we're doing in this course, and I find what most people do start with, and what I start with, is that I start with my desktop design, and then I scale it down for my mobile. It's up to you whether you start designing your mobile first or desktop first.
Just know though, that it's sexy to go and do mobile first. People love doing mobile first. Me, I kind of rock the boat a little bit by doing desktop first. But don't worry, it makes no difference to your site, and how it works on mobile, or a tablet.
So, what we're going to do is, desktop first. This means that this 'h1' is going to be desktop, and just to make things a little easier, what we're going to say is, we're going to put in a comment. The comments are this one here, and this here with the slash and then the asterisk, that's commenting in CSS. You can see one up there. That just means anything that I put in here is just for people, it's ignored by the browser, so you can write anything in here just to help yourself. Say you finally correct something, and you want to leave a note to yourself, you do it in these brackets here, on these little code snippets here.
So, what I want to do is just go to my desktop view. And next what I want to do is I want to copy and paste that. I'm done here. Now, 'return's means that anything in code-- okay, this is going to be my tablet view. So what I want to do is, we'll learn how to switch this out using something called a media query. Now, to write that media query, it's the @ symbol, then you type media, then you put in brackets, then you type in 'max-width'. Now, in terms of media queries, this is the one thing at the moment that Dreamweaver is not super helpful with. The only bit of stuff you're going to have to write out pretty much all of the syntax for. This is as hard as it gets.
If you're following along, you can copy and paste with the exercise files, you can download those and play along. You just copy paste it up, or like me, you can write it out.
We're going to pick out a tablet size now. Our max-width just means, we're trying to say, what size should this website change? Well, what size is the tablet size? Now, the most common at the moment is 768 pixels. That will adjust all the time, and some people use some slightly different ones, but that's the most common tablet size at the moment. Then, I'm going to put in curly braces. So that there is your media query. And it just means that anything inside of those two curly braces now is going to be triggered when the browser gets to a width of that.
So let's do that. Let's do 'h1', like we did up above. And what we're going to save is-- don't forget your curly braces. Now ‘h1, curly brackets, return’. And what we're going to do is, is we're going to force the color to change. So we use color like we did above. I'll use the color picker, and I pick green. Don't forget the semicolon at the end.
So, what's going to happen now, is that-- let's just put some spacing in here to make it look a little nicer. It just means that desktop view, it's going to be this color, but then, if the browser happens to be a width of this,or less, it is going to change it to this green color. Let's go just to that. Let's hit 'save'. Let's jump to our browser. Here it is. So, desktop view, it's red, but when it gets down to-- hey, look at that. So, with the width of 768, it's going to switch the color, and that my friends is how responsive web designing is done. Not that hard. People get a little freaked out by it.
It just means that, at this size do this other thing. And it can be-- like in our case, we're going to stack our navigation slightly different. So we're going to stack these guys there. You can see over there. And with these boxes down the bottom here, instead of stacking them 2x2, sorry, 3x3, on desktop. It's going to be 2x2 on tablet. Nice!
Let's go and do it for mobile as well. Because we're going to use all that stuff again, nice and easy, so, let's go to mobile, and the max-width for mobile, this one is a bit of a hard-- Mobile phones keep changing, they keep releasing new models of iPhones, and-- so 400 seems to be a really good size. I find it's really useful. It kind of ties in some of the bigger phones, the phabletty ones, and also, kind of like the real traditional. How big are iPhones at the moment? I think they're 375, or something like that. So I make it just a little bit bigger to cover in some of the bigger LG, Samsung phones. Do 400, it will be fine.
And what we're going to do is, we're going to change the color. So, if I type in semicolon, it should give me my little picker again. And I'm going to pick, I'll pick pink, or magenta, or purple, whatever this color is. Remember at the end, the semicolon, don't forget him. Save it. Let's jump out to our browser. Come on, browser. There's one here.
So, red, desktop. You’re ready? Tablet, green. Here we go. Mobile, it is a purply movie color. I'll dispute that color.
And that is responsive web design. So, in here, in my CSS, you can see the nice thing about my HTML, it is super clean and clear, there's very little on this page. There's just one new line that we added. But, in our styles, it looks quite complicated, but because you've built a web mirror, we're like actually, "I know what that does." It's not actually that hard coding. It isn't as hard as it looked. So, we got an ‘h1’, that's my desktop view, and, can you see what's happened here? This flow, it's got a cascading style sheet, CSS, that means that this thing here, say the font family, it flows down, and because the tablet doesn't argue with it, and the mobile doesn't argue with it, it stays Gill Sans the whole way through, whether it's mobile, tablet, or desktop. But, color though, it's a bit of a fight going on. What happens is, it's desktop unless this little media query gets triggered into that.
And then, it will flow down to here, in this little media query, it goes, "Hey, I want to be, when I get down to mobile size, I want to be this green color as well, sorry, pinky, purply, movie color.”
So, that is a media query. What we need to do now though, is switch out our particularly lame ‘h1’ and do it with our navigation. Where we have that nav-sandwich, and things start working. So let's jump out and start doing that now.