Solved

responsive design

Posted on 2014-01-23
10
178 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 500 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 42

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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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 dynamically set the form action using jQuery.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

751 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