Improve company productivity with a Business Account.Sign Up

x
?
Solved

responsive design

Posted on 2014-01-23
10
Medium Priority
?
185 Views
Last Modified: 2014-02-03
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
Comment
Question by:rivkamak
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39804646
Why are you linking to just the header?
The site works and looks fine to me (the real site that is)
0
 
LVL 29

Expert Comment

by:chilternPC
ID: 39804696
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
 

Author Comment

by:rivkamak
ID: 39804765
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 58

Expert Comment

by:Gary
ID: 39804780
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
 

Author Comment

by:rivkamak
ID: 39804815
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
 
LVL 29

Accepted Solution

by:
chilternPC earned 2000 total points
ID: 39804851
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
 
LVL 58

Expert Comment

by:Gary
ID: 39804883
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
 

Author Comment

by:rivkamak
ID: 39806893
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
 
LVL 58

Expert Comment

by:Gary
ID: 39806944
Add to the end of your css

.nav_list {
    display: none;
}
0
 
LVL 43

Expert Comment

by:David S.
ID: 39807066
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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question