My first responsive theme, help!

HTML & CSS
1

My first responsive theme is driving me nuts!

I started off with a fixed layout, then converted this into a fluid layout with min-width. From here I placed some media queries for the widths of various devices, starting off with the smaller device first.

The issue I have with FF is that it does not go down to 320px width, something is stopped it. There are so many browser inconsistencies.

The link to the web page is here, still not sure what’s up with it. Any helps, comments and suggestions would be greatly appreciated.

2

Firefox has a min-width of about 600px, and that’s just how it is. If you want to test the page at lesser widths, Opera is a better choice for testing, although Chrome and Safari also go quite narrow.

The Firefox web developer tools have some options for narrowing the screen in Firefox too.

3

There’s also Opera Mobile, Mini and firefox mobile emulators you can use.

http://www.mozilla.org/en-US/mobile/

4

Yep, and if you have a Mac, you can test for iPhone and iPad too with the simulator that’s part of the Developer tools.

5

[quote=""ralph.m “”]

Firefox has a min-width of about 600px, and that’s just how it is. If you want to test the page at lesser widths, Opera is a better choice for testing, although Chrome and Safari also go quite narrow.

[/quote]

That clears everything up now. Thanks. There are quite a few tools to test a responsive website, it all very slow at the moment as converting a fixed width to a responsive would not be the ideal solution. I feel it’s best to have your site work perfect in a flexible layout of 600px, from here maybe work into the 320pixel layouts.

Thanks again for clearing this up for me.

@markbrown4;
Awesome stuff! Will check those out!

6

Would it be worthy here of mentioning Multi-Browser Viewer and [URL=“https://www.microsoft.com/expression/products/Web_Overview.aspx”]Microsoft Expression Web?