Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Modifying Styles within Media Queries

Modifying Styles within Media Queries

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Troubleshooting CSS Issues 1:17
    • Enable CSS Properties
    • Preview in Browser
    • Tablet Version Style Errors
    • Modify Tablet Styles
    • Preview in Browser
    • Firebug
    • Modify Media Query Styles
    • Preview in Browser
    • Copy and Paste Styles
    • Preview in Browser
  • Summary 17:32

Transcription: Modifying Styles within Media Queries

I now want to show you how to go ahead and edit your CSS rules while you have media queries assigned, because it is a bit more complicated than just a basic single CSS file.0000

This is where the Dreamweaver interface really comes in handy, because it's difficult to go out to the browser and do this.0015

What I have here is (and I'll just show it to you in Dreamweaver)--I have this set up (and I'm going to close my Properties here)--the create-media-query page is open, and I have just finished adding my three media queries to this page.0023

The tablet and desktop seem to be working fine; so this is what it looks like there; and you can see that my navigation piece pops down to the bottom, but it's not exactly in the right spot in the tablet version.0041

But if I look at the phone version, this is where it gets really interesting; let me go ahead...and you can see, it gets rather strange right here.0057

What is going on with this version?--well, let me close up the Files panel so we can focus on the CSS version.0069

There seems to be a problem once I get into the phone version.0078

Now, I'll pop open Properties to show you one more thing: what you want to pay attention to is this Window Size feature in Dreamweaver.0083

Personally, these are great--the Mobile, Tablet, and Desktop--if I want to look at one size; but I like to drag this window so I have more variety; and as I drag the window, this window size changes.0093

Right now, it's on 643; what I am going to do is (let me scroll back up here) I go to click on it, you can see how, as I pull it smaller, this gets smaller--this first number is the width.0108

So, let me figure out at what width this starts to have a problem...and you can see, it pops, I'm not in Live View pops in just fine right there, at 828, 823, or so.0124

Where I start to really have trouble is right here, when it pops into this size; and that happens, as you can see, right around 800.0144

Well, what is happening at 800?--well, what it is doing is: the minimum width here is 769; so, right around 800, it is about to drop into my tablet version.0156

And let me go ahead and make it even smaller...and you can see, there are some problems there.0171

Now, let me put it on Live View, and we'll take a look; that was not Live View; watch this area up here.0178

If I go into Live View, you can see, my tablet version looks just fine until right about here; I'm at 778; as soon as I get down under 770, you can see there is a problem.0186

So, what happens at 770 in this area?--well, maximum width for the tablet is 768, so that is right about when there is an issue.0204

And what is happening is: this is up in my header area; so, I am going to turn off Live View; I am going to put my cursor in this upper area; and you can see, here is a logo, and I'll select that--that is my text.0216

Now, I know the text is showing up with this class of logo; what about the header?0233

Well, it doesn't look like (you can see the yellow outline) the background color on my header is coming through.0240

So, which of these should I choose?--well, this is at 766; so, let me look at the tablet version of the header--and guess what?--at some point, I had turned these off so I could do something else; you can see, they have the Disable feature on the front of them.0248

Let me go ahead and enable these just by clicking; and you can start to see some things happen up in this upper area.0269

And guess what?--that portion is fixed.0279

So, at some point, my header region was disabled.0283

Now, what you do to play around with this (and this is the tricky part): we know the desktop version was my first version, and when it's the full width, I don't have too much trouble; what happens is: when it gets smaller, I did.0288

Let's see if the tablet version is now correct; and I should probably also check my phone version...and guess what?--the header is turned off here, as well.0303

Let me turn that back on, because that seemed to also have a problem.0317

Now, what I did was changed two CSS files: I changed the properties in the phone version and the tablet version.0323

My phone version has the asterisk on it, as does my tablet; so, this is when the Save All becomes very important.0333

I'll go ahead and choose that; and I am going to go out to the browser, instead of Dreamweaver; let me see how things are going now.0342

Well, here is my phone version--you can see, it looks a little bit better.0350

Now, it is not really designed to get that small--nobody would have a device quite that small.0354

As soon as I get out to here, you can see, I have lost my header pieces down here--I don't have my Header 1 showing up in either one of these two.0361

This is a Header 1; this is a paragraph...let's see how it goes from there.0371

As I get looks like my tablet version is doing OK; my secondary navigation area here is on the left-hand side--so, in my tablet version, I have fixed the rest of it, but I need to fix this area here.0378

Let me go out to the tablet version in Dreamweaver; I am going to turn on Live View by clicking the Live button; and you can see, at this width, things look OK with regards to that navigation.0396

When I go wider, it moves over to the right-hand side; so, my styles end up fine in this area, but my navigation does not.0411

This is my tablet version; so, let me move over to the tablet...and I tend to try and close up the rest of these, because it can get confusing, and open this area up.0421

Now, that navigation area is contained right here; and I'll move out of Live View; I'll move down to that area; and if I click inside there, I can use this piece here.0433

The idea is: my secondary navigation has a problem.0449

Now, it's located inside the right ID; so in my tablet information, if I want to modify it, I need to go down to the right ID, and let's see what happens.0453

Well, it is set up to float left; but I have all of this padding; the width is 50; let me start playing with this.0467

What happens if I remove the Float?--absolutely nothing.0476

Now, this is on my tablet version, so let me get it small enough to be in the tablet; OK, now it's in the left-hand side.0481

Let me take my Float and put it back.0489

That one is OK; Margin Right is set to 50; I have padding; I have a width; what about this Hide property?0493

Well, you can see, in my tablet version, this is supposed to hide; or at least, this class hides it.0504

Now, in my tablet version, I don't want it hidden; I just want to drop it underneath.0512

So, I am set to my tablet version; this is between 321...there it is!--you know what, I may have fixed it already: let's take a look in the browser.0518

You can see, modifying these does get a bit tricky; that is why, when it comes to media queries, it's a good idea to get used to these.0530

Now, for some reason, this navigation is over here in this version; what I could do is put it into Firefox and use Firebug to modify it.0537

This looks like it's in a Float Right instead of floating left; but if I go out to my tablet and check this, it is definitely floating left, and when I look at it at that size (it's 662), it is definitely floating left.0548

Let me take a look at my phone version: here is my right; now notice in my phone version what is going on.0568

I have a Float Right; let me try removing that; in my phone version, I have turned this entire box off here with Display None, but sometimes you can find some of these properties interfere with one another.0576

So, let's take a look: I'll go ahead and do a Save All; I'll put this out in my browser; and let's see what happened now.0593

It is still definitely on the right-hand side; so what I am going to do is go out to Firefox, and I'm going to use Firebug.0605

If it gets a bit confusing in Dreamweaver (working with this piece--these media queries), you can always rely on Firebug--and we haven't really looked at that.0614

OK, so I set Firefox out to the size where that is having a bit of an issue; now, I am going to turn on Firebug; I am going to click this icon.0626

Now, I installed Firebug at another time; and I am going to click this little arrow here, and I am going to highlight this.0639

And notice what it is doing in the Styles area--watch this section right here: when I do that, you can see, my image says it's left-aligned--it has a left-aligned class assigned to it.0649

If I go out to the navigation, that class is set to hide; and if I go out to here, notice, this says Float Right on it.0664

So, for some reason, this Float Right is happening; if I turn it off, you can see, it goes over where it's supposed to be.0674

Within this area, what is controlling this?--well, my styles-desktop is controlling it.0683

What I did was: I turned off that Float Right within my desktop--the problem is, I want that assigned!0692

And what you are starting to see are some of the inheritance features that can happen; so, the idea is: in my desktop version (and if I hover over this, you will be able to see), it is definitely my desktop that had the Right on it.0701

If I uncheck that, you can see, there it is on the right; and as soon as I get down to my phone, this version, it is popping into place where it is supposed to be.0717

What I may need to do is modify the screen widths in order to fix this, because now that the tablet version is in play, you can see, it's working fine.0729

It appears that my desktop version is kicking in, keeping it there; and it is not quite working at that size.0741

What I might want to do is change and raise my desktop width, so that it doesn't end up falling into this area.0752

Let me raise the width of my desktop within Dreamweaver.0762

What I can do is go back out to my Media Queries area; or, if I don't want to have to do that and move out to that interface, I can literally go into the source code here--and I haven't shown you this piece at the top, but let's take a look.0768

Up in this area, there is quite a bit of information right at the top of your page; and when I said that I want Dreamweaver to put it on this page, this is why.0786

You can see, here is my max width for my tablet; the problem is: my desktop is not wide enough.0797

So, what I am going to do is change this from 768; I am going to change it to 900, and I am going to change my minimum width for the desktop version to 901.0805

And you can see (let's get back down to that--I'll pull it in here, and let me fix that--901; there we go), my tablet is going to kick in at 899.0821

Sometimes, it is not just the styles themselves.0836

Let's look at it one more can see why this topic can get a little bit tricky...and now, it is staying down below on the left-hand side; and then, it does jump just a little bit right here; and then, as soon as I get it wider, you can see, it pops right into place.0840

So, sometimes you have to make these decisions with regards to "at what point do you want it to move?" and "where do you want to move it to?"0862

I could set this up as a Left Float, and then I might not have any problems, but I wanted to show you how to handle some of these types of things that can happen when you are working in media queries.0871

Now, the other thing that has happened is: I have, in my desktop version...I have a Header 1, 2, 3, and p; and those are just not listed in my other version, my phone version.0885

So, what I can do is go out to those, and I can go out to my desktop version...and these are some of the times when working in code makes quite a bit of sense.0903

Let me close this up, and I'll do a quick copy of this; here is my Header 1, line 127 through 143.0914

I can literally just copy them off my desktop, move over to the phone version, and paste them in at the end.0925

I am just missing those styles within my phone version.0935

I'll go ahead and save, and let's take a look in the browser now.0940

There it is on the desktop: now it looks like my tablet version is missing that, as well; let's see, when I move into the phone version...not quite working correctly.0946

I still have a little bit of work to do within this area; but I wanted to give you a taste for working back and forth within these.0959

Now, I do have a completed version of this create-media-query all corrected for you to be able to take a look at and view.0969

Feel free to play around with this; it is not quite set...let me quickly move into the tablet version; I'll go down here, since I have it on the clipboard; and I'll paste those header pieces in here and save a Save All.0980

Pop it back into the browser, and I should have all the styles for the headers, p's...and you can see, no matter how small it gets, it is working correctly.0998

I still have a couple of issues; as I said, I will have a completed version of this file for you to look at; just search for create-media-query.1010

We don't really have time in this Dreamweaver course to get into everything within this Media Query piece, but go ahead and look at the completed version, and you will be able to get a feel for setting this all up correctly.1020

I also have another file that is available for you, and that is down in the Media Query area; you can also view this file to get a completed version of this page on a separate page, so you can kind of compare the two and see what you think.1035

That is how you can start editing, working with media queries.1053

You can see, it's a little more complicated than working with just a single CSS file; but you do have some files in your Files panel in order to start to get familiar with this Media Query concept and working with it in Dreamweaver.1057