Solved

responsive design

Posted on 2014-01-23
10
174 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
Comment Utility
Why are you linking to just the header?
The site works and looks fine to me (the real site that is)
0
 
LVL 28

Expert Comment

by:chilternPC
Comment Utility
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
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 28

Accepted Solution

by:
chilternPC earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Add to the end of your css

.nav_list {
    display: none;
}
0
 
LVL 42

Expert Comment

by:David S.
Comment Utility
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now