just tested my site on browserstack and it looks horrible in most browsers and media queries arent working in any!! YAY!

Hi Russell, Thank you - I am using Dreamweaver (and paying monthly for Creative Cloud) so the mobile-first issue should not be a problem for me - but it is!! I have constantly checked the phone and tablet version of my site while I was building it and they look great in dreamweaver and work properly when I open the local docs on my browser. The media query isnt working on the hosted site now that I have transferred the files via FTP. What could I be missing?

Hi Alberto, Here is my media query:

@media (max-width: 769px) {

.main-wrapper {
    background: none;
    width: 90%;
    }

.main-logo,
.main-nav,
.main-nav li  {
    display: block;
    width: initial;
    margin: initial;
    }
.main-logo {
    margin-right: auto;
    margin-left: auto;
    }   
.main-logo {
    display: 90%;
    }
.main-nav {
    margin-right: 10px;
    margin-left: 10px;
    padding-left: initial;
    float: none;
    }
    #nav-buttons {
    font-size: 1.5rem;
    }       
.main-nav li {
    margin-top: 15px;
    }       
.main-banner {
    display: none;
    }   
.primary-content {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    border-right-style: none;
    }
.secondary-content {
    display: none;
    }

.ftrimg {
    max-width: 50px;    
    }           

}

What did you type for your media query?

I've never used Dreamweaver so I might not be the best person to help out with this one. But from what I can see from your media query is that you've only got one (maxwidth: 769px)... so every browser size smaller than 769px is going off that one media query. I would suggest adding more media queries at smaller scales ( like maxwidth: 500px, 300px, etc) where you adjust the size of all your content to fit each media query specifically. Hopefully that makes sense :p

I think you shuold try with a better responsive layout. Try to fix images with a % dimension , buiilding up two section for your colums and then build a new media query that make your site fill in one single column if the screen is too small, two if the screen is fine. If u need an help to do this just ask, but with the basic tutorial there shuold be all explaned in 4 minutes!

https://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/build-a-three-column-layout

Hey guys, Would you please have a look at my site today and resize as well? Please let me know of you see any improvement. Otherwise Im back to the media query vids! Thank you!

Now is really really better! The only problem i have is about the image in the header. I see it going out of the page! The others elements of the site looks great!

Thank you. It's a completely new mobile version now. I agree about the header image. It's bad because the text is in he image and not readable by search engines or screen readers. I thought it was so cute though. I have to figure out a way to make the text readable, or just get rid of it. Thanks again!

Your welcome! Is nice to be usefull ^^

Bye!