Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 182
  • Last Modified:

responsive design

I created this page
http://www.oorahauction.org/header_new.asp
when I change the size of a desktop browser window it calls the different css that are made for responsive and changes the styles
but when I go there from my phone it just show me a desktop version of the site and ignores the css that are made for small screen size - like mobile.

any idea why, and how can I get it to work?
thanks
0
rivkamak
Asked:
rivkamak
  • 4
  • 3
  • 2
  • +1
1 Solution
 
GaryCommented:
Why are you linking to just the header?
The site works and looks fine to me (the real site that is)
0
 
chilternPCCommented:
the site http://www.oorahauction.org  does work on smartphones correctly

the link you have in the question doesn't change  because  it  doesn't have any tests in the style sheets except only has a  test for the screen size except at the bottom of one of the style sheets.
0
 
rivkamakAuthor Commented:
I'm trying to change the design of the header but can't put it up before it will work for mobile
The site  http://www.oorahauction.org is working fine and I'm using the same css files so why it's not resizing?
What's 'tests in the style sheets' - not sure what this is referring to.
do I need anything more then different style sheets in order to make it work?
Maybe a function that recognize mobile devices?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
GaryCommented:
Viewing just the header is putting it out of context and what you end up with is an invalid html document.
You need to view it in the bigger picture
And as it is it resizes fine for me. If it's not working on mobile then it is down to the invalid html and/or missing elements from the page e.g. BODY
0
 
rivkamakAuthor Commented:
The site oorahauction.org works fine . that is not my question.
i am switching the header to create a different design and will use it to replace the main header however i need to make sure it is responsive just like the first one.
For some reason it is not i do not know why.
I am using css media queries to make it responsive.do i need more than that?
is media queries compatible with modern day phones which have a high ppi?
at first i used min-width and max-width which didnt work at all . now i switched it to min-device-width and some parts are working but most is not
0
 
chilternPCCommented:
you new file is missing the following from the top of the file:

<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
0
 
GaryCommented:
Even if you are just checking the header you still need all the HTML markup that you would normally have, your css is based on a properly marked up document, just loading header.asp is not a valid document.
0
 
rivkamakAuthor Commented:
Thanks! My new header is working now
https://www.oorahauction.org/

The navigation for the site is open when the page loads and it slide close when you click on the header. That pushes all the content down.
Any idea how to have it close when the page loads and let people click on it when they interested.
0
 
GaryCommented:
Add to the end of your css

.nav_list {
    display: none;
}
0
 
David S.Commented:
Disabling zoom is user-hostile. Use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Open in new window

0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now