Solved

responsive design

Posted on 2014-01-23
10
175 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 28

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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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 28

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

Ransomware: The New Cyber Threat & How to Stop It

This infographic explains ransomware, type of malware that blocks access to your files or your systems and holds them hostage until a ransom is paid. It also examines the different types of ransomware and explains what you can do to thwart this sinister online threat.  

Question has a verified solution.

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

Suggested Solutions

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

821 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