Media Queries behaving differently for each Browser - html

I'm working on a simple institutional website and all works well, except for the media queries. I'm new to this technology so I don't really know whats going on.
My issue appears when I open the collapsed bootstrap menu on iPad like screens and smaller and it depends on the browser.
It works fine for Firefox and has some issues with Chrome and Safari, so it makes me believe that my code is working, but I am missing some important aspects of browser compatibility.
I want the navbar menu to open with a gray background when the screen is medium size (only works for Firefox) and black for mobile (Safari has a bug which opens the whole menu and them cuts it by half).
This is the website: flowersforpeaceproject.com
And here is the code:
body {
margin: 0;
padding: 0;
font-family: 'Merriweather Sans', sans-serif;
}
/*NAVBAR*/
.navbar{
border: 0;
position: absolute;
top: 0;
z-index: 10;
width: 100%;
}
.navbar .nav > li > a{
color: #1E73BE;
}
.navbar-default{
background-color: transparent;
}
nav .navbar-brand img{
height: 220px;
margin-right: 20px;
}
/*MEDIA QUERIES*/
#media screen and (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
/*MY CODE*/
#bs-example-navbar-collapse-1 .navbar-right{
background-color: rgb(50,50,50, 0.9);
border-radius: 10px;
max-width: 180px;
}
}
#media screen and (max-width: 480px){
nav .navbar-brand img{
height: 120px;
margin-right: 20px;
}
#bs-example-navbar-collapse-1 .navbar-right{
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
}
/*END MEDIA*/
...

There's an good Resource available for learning and playing with media querys. here
Since this is an Browser based media query bug you can easily solved by specifying different CSS to each screen resolutions.
Here is an good tool to generate media Query. Open Site.
in your code you can generate css, for example for different Screen Resolutions.
#media screen and (max-width: 400px) {
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
#media screen and (min-width: 401px) and (max-width: 720px) {
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
#media screen and (min-width: 721px) and (max-width: 1280px) {
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
#media screen and (min-width: 1281px) and (max-width: 1440px) {
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
#media screen and (min-width: 1441px) and (max-width: 1920px) {
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}
#media screen and (min-width: 1921px) {
border: 0;
position: absolute;
top: 10;
left: 0;
z-index: 10;
width: 700px;
margin-left: 20px;
background-color: black;
border-radius: 10px;
}

Related

text in navbar displaced on other sections of page

In certain sections of my site, the text within the navbar is a few pixels off compared to the other sections. (possible clue: section 'Austausch' and 'Mitmachen' are the two who do have the same positioning.)
I've not yet been able to figure it out, but I would guess that it has something to do with me manually setting the 'top' position trough inline-css. To not clutter this page too much, you can just view the source code by inspecting the webpage here.
Here's my style.css:
#-webkit-keyframes blink {
/*
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
*/
}
.blink {
/*
-webkit-animation: blink 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 1s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 1s;
-o-animation-iteration-count: infinite;
*/
}
html {
background-color: #e7d8cf;
background-image: url("placeholder.png");
background-repeat: repeat;
background-size: 150px;
}
html,body{
overflow-x: hidden;
}
body {
margin: 0 auto;
width: 100%;
height: 100%;
}
.container {
display: block;
width: 30%;
height: 800px;
margin: 50px;
text-align: center;
border: none;
background-color: none;
}
#media only screen and (max-width: 768px) {
.container {
width: 320px;
height: 500px;
}
}
.header {
position: relative;
top:100px;
width: 200px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 0;
}
#media only screen and (max-width: 768px) {
.header {
width: 20%;
height: 20%;
}
}
.navbar {
align-content: center;
width: 500px;
height: 20px;
margin: 5px;
padding: 10px;
border: 1px solid black;
box-shadow: 0 1px 0 red;
background: #faf8f7;
}
#media only screen and (max-width: 768px) {
.header {
width: 20%;
height: 20%;
}
}
.box {
position: relative;
top: 50px;
left: 50%;
display: block;
float: left;
width: 740px;
height: 420px;
margin: 5px;
padding: 10px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid black;
background: #faf8f7;
/*
box-shadow: -3px 3px 0px #000000; */
}
#media only screen and (max-width: 768px) {
.box {
width: 300px;
height: 500px;
left: 20px !important;
}
}
#media only screen and (max-width: 400px) {
.box {
left: -50px !important;
}
}
.track {
height:100px;
background-color:none;
top:-30px;
box-shadow:none;
border:none;
position: relative;
display: block;
float: left;
width: auto;
height: auto;
overflow-y: auto;
overflow-x: hidden;
background: #faf8f7;
}
#media only screen and (max-width: 768px) {
.track {
}
}
.nav {
margin-top:20px !important;
/* position: fixed; */
top: -960px;
/* display: block; */
float: left;
left: 50%;
width: 400px;
height: 20px;
margin: 5px;
padding: 10px;
/* overflow-y: auto;
overflow-x: hidden; */
border: 1px solid black;
background: #faf8f7;
box-shadow: -3px 3px 0px #000000;
}
#media only screen and (max-width: 768px) {
.nav {
width: 300px;
top: -1100px;
left: 21px;
height: 30px !important;
}
}
#media only screen and (max-width: 400px) {
.nav {
left: -50px !important;
}
}
.minibox {
position: relative;
left: 20px;
top: -280px;
display: block;
float: left;
width: 260px;
height: 40px;
margin-top: 5px;
padding-top: 10px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid black;
background: #dbdbdb;
box-shadow: -3px 3px 0px #000000;
display: none;
}
#media only screen and (max-width: 768px) {
.minibox {
width: 20%;
height: 20%;
display: none
}
}
.subbox {
position: relative;
left: -11px;
width: 761px;
height: 330px;
margin-top: -5px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid black;
background: #faf8f7;
}
#media only screen and (max-width: 768px) {
.subbox {
width: 319px;
height: 330px;
}
}
.blinktext {
left: calc(50% - 70px);
position: relative;
top:50px;
width: 200px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 0;
margin:0;
color:white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,-2px 2px 0 #000;
display: none;
}
#media only screen and (max-width: 768px) {
.blinktext {
display: none
}
}
p, h2, a {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
}
#media only screen and (max-width: 768px) {
.minibox {
font-size: 10px;
width: 20%;
height: 20%;
}
}
a {
/* font-family: "Lucida Console", "Courier New", monospace; */
text-decoration: none;
font-weight: normal;
color: black;
}
img {
border: 1px solid black;
outline-offset: -1px;
}
#media only screen and (max-width: 768px) {
.img {
width: 20px;
}
}
Your top position has no effect here since it's static.
See here some documentation about it :
MDN Web docs - top
The HTML code is different from one page to another, nav element in one of the page is nested into a <small></small> HTML element, in other page it is not. So you have to make uniform you code to expect a similar behaviour.

Only two media query breakpoints in my css work..why doesn't the rest also work?

My question is why will only the iphones min and max widths load in my css but
not my ipads min and max widths? I know that all my css does work individually but not all together. I also tried using multiple stylesheets instead but i had the same issue..where only the last 2 stylesheets would load.
<head>
<title></title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css?v=1"/>
</head>
container, header, menu, home-info {
display: inline-block;
}
body {
background-color: pearl white;
}
#container {
width: 50%;
height: 800px;
background-color: white;
position: fixed;
transform: translateX(-50%);
left: 50%;
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
.header {
height: 200px;
width: 100%;
color: white;
transform: translateX(-50%);
left: 50%;
position: absolute;
text-align: center;
font-size: 220px;
background-color: grey;
}
.menu {
position: absolute;
top: 205px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
}
.menu ul{
margin: 0;
padding: 0;
float:left;
}
.menu ul li{
float:left;
list-style:none;
position:relative;
}
.menu ul li a{
display:block;
text-decoration:none;
padding:10px 10px;
text-align:center;
width: 775px;
height: 25px;
background-color: silver;
font-size: 25px;
border-radius: 5px;
color: white;
}
.menu ul li a:hover{
background: yellow;
color: #00357d;
box-shadow: 5px 5px 25px 5px yellow;
}
.menu ul ul{
visibility:hidden;
position:absolute;
}
.menu ul li:hover ul{
visibility:visible;
}
.menu ul ul li a:hover {
background: yellow;
color: #00357d;
}
.menu ul ul ul {
visibility: hidden;
position: absolute;
}
.menu ul ul li:hover ul {
visibility: visible;
}
.menu ul ul ul li a:hover {
background: yellow;
color: #00357d;
}
.menu ul ul ul ul {
visibility: hidden;
position: absolute;
}
.menu ul ul ul li:hover ul {
visibility: visible;
}
.menu ul ul ul ul li a:hover {
background: yellow;
color: #00357d;
}
.menu ul ul ul ul ul {
visibility: hidden;
position: absolute;
}
.menu ul ul ul ul li:hover ul {
visibility: visible;
}
.home-info {
color: grey;
font-size: 20px;
top: 550px;
position: absolute;
margin-left: auto;
margin-right: auto;
}
/*max-ipads*/
#media only screen and (max-width: 1024px){
#container {
width: 50%;
height: 800px;
background-color: white;
position: fixed;
transform: translateX(-50%);
left: 50%;
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
}
#media only screen and (max-width: 1024px){
.header {
position: absolute;
height: 100px;
width: 100%;
color: white;
transform: translateX(-50%);
left: 50%;
text-align: center;
font-size: 105px;
background-color: grey;
}
}
#media only screen and (max-width: 1024px){
.menu {
position: absolute;
top: 75px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
}
}
#media only screen and (max-width: 1024px){
.menu ul li a{
display:block;
text-decoration:none;
padding:10px 10px;
text-align:center;
width: 350px;
height: 15px;
background-color: silver;
font-size: 25px;
border-radius: 5px;
color: white;
}
}
#media only screen and (max-width: 1024px){
.home-info {
color: grey;
font-size: 15px;
top: 420px;
position: absolute;
margin-left: auto;
margin-right: auto;
}
}
/*---min-width---*/
#media only screen and (min-width: 768px){
#container {
width: 50%;
height: 1024px;
background-color: white;
position: fixed;
transform: translateX(-50%);
left: 50%;
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
}
#media only screen and (min-width: 768px){
.header {
height: 80px;
width: 100%;
background-color: grey;
color: white;
transform: translateX(-50%);
left: 50%;
position: absolute;
text-align: center;
font-size: 80px;
}
}
#media only screen and (min-width: 768px){
.menu {
position: absolute;
top: 55px;
left: 50%;
padding: 5px;
transform: translateX(-50%);
}
}
#media only screen and (min-width: 768px){
.menu ul li a{
display:block;
text-decoration:none;
padding:10px 10px;
text-align:center;
width: 480px;
height: 25px;
background-color: silver;
font-size: 15px;
border-radius: 5px;
color: white;
}
}
#media only screen and (min-width: 768px){
.home-info {
color: grey;
font-size: 21px;
top: 430px;
position: absolute;
margin-left: auto;
margin-right: auto;
}
}
/*iphones-max*/
#media only screen and (max-width: 480px){
#container {
width: 50%;
height: 350px;
background-color: white;
position: fixed;
transform: translateX(-50%);
left: 50%;
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
}
#media only screen and (max-width: 480px){
.header {
height: 50px;
width: 100%;
color: white;
transform: translateX(-50%);
left: 50%;
position: absolute;
text-align: center;
font-size: 50px;
background-color: grey;
}
}
#media only screen and (max-width: 480px){
.menu {
position: absolute;
top: 55px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
}
}
#media only screen and (max-width: 480px){
.menu ul li a{
display:block;
text-decoration:none;
padding:10px 10px;
text-align:center;
width: 125px;
height: 15px;
background-color: silver;
font-size: 10px;
border-radius: 5px;
color: white;
}
}
#media only screen and (max-width: 480px){
.home-info {
color: grey;
font-size: 10px;
top: 270px;
position: absolute;
margin-left: auto;
margin-right: auto;
}
}
/*smartphone-min*/
#media only screen and (min-width: 320px){
#container {
width: 50%;
height: 420px;
background-color: white;
position: fixed;
transform: translateX(-50%);
left: 50%;
box-shadow: 0 0 75px 0px rgba(12, 3, 25, 0.8);
margin-bottom: 5px;
}
}
#media only screen and (min-width: 320px){
.header {
height: 80px;
width: 100%;
background-color: grey;
color: white;
transform: translateX(-50%);
left: 50%;
position: absolute;
text-align: center;
font-size: 80px;
}
}
#media only screen and (min-width: 320px){
.menu {
position: absolute;
left: 50%;
padding: 5px;
transform: translateX(-50%);
margin-top: 30px;
}
}
#media only screen and (min-width: 320px){
.menu ul li a{
display:block;
text-decoration:none;
padding:10px 10px;
text-align:center;
width: 200px;
height: 25px;
background-color: silver;
font-size: 10px;
border-radius: 5px;
color: white;
}
}
#media only screen and (min-width: 320px){
.home-info {
color: grey;
font-size: 10px;
top: 320px;
position: absolute;
margin-left: auto;
margin-right: auto;
}
}
If this is exactly how your styles are laid in your stylesheet (tough to tell without seeing an actual source), then I believe your problem is NOT that the iPad styles aren't loading - it's that they are loading in the wrong order.
You should lay out your styles from smallest (top) to largest (bottom) (i.e. 320 then 480 then 768 etc.). Otherwise your smaller screen styles are likely overriding your larger screen styles.
For example, if I do:
#media (max-width: 1024px) {
.box { background: red; }
}
#media (min-width: 420px) {
.box { background: yellow; }
}
The background color will be yellow on any screen from 420px to 1024px.
Therefore, you need to either switch the order from smaller to larger OR you can get more specific with your media queries. Example:
#media (min-width: 768px) and (max-width: 1024px) {
.box { background: red }
}

media queries are being ignored

I set the media query for desktop, tablet and mobile. desktop seems to be working fine, but the tablet and mobile are being ignored.
Here is my page: http://moran88.github.io/coursera-moran/mod2_solution/
Please help I don't understand the reason of this happening.
Thanks
Your css is missing some brackets, try this:
h1 {
font-family: helvetica, arial;
text-align:center;
}
* {
box-sizing: border-box;
font-family: helvetica, arial;
}
.row {
width:100%;
}
.text {
background-color: #b3ccff;
height:100%;
border: 1px solid black;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
position: relative;
}
p {
padding-top: 10px;
padding-left: 3px;
}
.title {
position: absolute;
top: 0px;
right: 0px;
padding-right: 8px;
padding-left:8px;
border: 1px solid black;
text-align: center;
color: black;
font-weight:bold;
border-color:black;
border-left-width: 1px;
border-top-width: 0px;
border-right-width: 0px;
}
#chicken {
background-color: #2d8659;
color:white;
}
#beef {
background-color: #d1d1e0;
}
#sushi {
background-color: #80ffd4;
}
#media (min-width: 992px){
.col-lg-3{
float: left;
width: 33%;
padding: 15px;
}
}
#media (min-width: 768px) and (max-width: 991px){
.col-md-6 {
float: left;
width: 50%;
}
.col-md-12 {
float: left;
width: 100%;
}
}
#media (max-width: 767px){
.col-sm-12 {
float: left;
width: 100%;
}
}

center this h1 'button'

This is a really basic question, but I simply can't get this to work. I styled a h1 heading in a bootstrap framework, but cant get it to either:
-stay in center
-make it smaller on smaller screens
Any help will be greatly appreciated!
My css:
.itsthisone h1 {
background-color: #fff;
border: 6px solid #dfdfdd;
color: #f47d41;
font-size: 18px;
margin-left: auto ;
margin-right: auto ;
padding: 20px 0;
position: absolute;
top: -34px;
text-align: center;
width: 720px;
}
#media (max-width: 479px) {
.itsthisone h1 {
font-size: 14px;
top: -15px;
margin-left: auto ;
margin-right: auto ;
padding: 10px 0;
}
}
#media (max-width: 768px) {
.itsthisone h1 {
font-size: 14px;
width: 360px;
}
}
My HTML:
<section class="itsthisone">
<h1>keep it in center!</h1>
Thanks in advance! (< /section> seems to dissapear from the code)
You can do this:
The logical: Move 50% of your absolute container and put half negative margin of the width of the container , then you get the center of the container relative to his parent. (static method)
CSS
.itsthisone h1 {
background-color: #fff;
border: 6px solid #dfdfdd;
color: #f47d41;
font-size: 18px;
padding: 20px 0;
position: absolute;
top: -34px;
text-align: center;
width: 720px;
left: 50%;
margin-left: -360px;
}
#media (max-width: 479px) {
.itsthisone h1 {
font-size: 14px;
top: -15px;
margin-left: auto;
margin-right: auto;
padding: 10px 0;
}
}
#media (max-width: 768px) {
.itsthisone h1 {
font-size: 14px;
width: 360px;
left: 50%;
margin-left: -180px;
}
}
DEMO HERE

iPhone uses smallest media query

I am new to making responsive websites and from what I have discovered is that you can make a responsive website in 2 different ways, the first is by making everything fluid or like I have done, creating #media screen only and (min-width: 640px) { for a variety of window sizes (max-width: 639px, min-width: 640px, min-width: 760px, min-width: 1020px and min-width: 1280px).
With each of these media queries I have designed the website to suit certain devices in mind, for example 640px is aimed for iPhone. However when uploading the website and viewing it on my iPhone the page was really messed up with scaling all wrong which lead to adding <meta name = "viewport" content = "width = device-width"> but this has lead to my website showing the smallest media query on my iPhone. I can't get the website to display properly on my iPhone with the right media query but on my laptop when I adjust the window size the website changes appropriately.
What am I doing wrong?
The page can be seen here, ivybridgemethodistchurch.co.uk/DEV/index.html.
#media only screen and (max-width: 639px) {
#wrapper {
}
#ne_wrapper {
width: 500px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.ne {
width: 100%;
height: 130px;
overflow: auto;
margin-top: 20px;
background: #FFF;
position: relative;
}
.ne img {
width: 130px;
margin: 0;
float: left;
position: absolute;
z-index: 100;
}
#ne_tag {
padding: 5px 0;
margin: 0;
position: absolute;
z-index: 200;
top: 0;
left: 0;
background: rgba(67, 149, 142, 0.85);
}
#ne_tag small {
color: #FFF;
margin: 0;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
#ne_container {
width: 330px;
margin: 20px;
float: right;
}
#ne_title {
margin-bottom: 10px;
}
#te_wrapper {
width: 500px;
margin: 40px auto;
padding-left: 20px;
padding-right: 20px;
}
.te {
width: 500px;
height: 500px;
padding: 0;
position: relative;
overflow: auto;
}
.te img {
width: 100%;
position: absolute;
z-index: 100;
}
#te_container {
margin: 10px;
float: left;
position: absolute;
z-index: 200;
}
#te_title {
float: left;
padding: 15px;
background: #FFF;
}
#te_title h1 {
float: left;
}
#te_details {
float: left;
padding: 15px;
background: #FFF;
}
#te_tag {
float: left;
clear: both;
padding: 5px 0;
margin: 0;
background: rgba(67, 149, 142, 1);
}
#te_tag small {
color: #FFF;
margin: 0;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
#te_description {
display: none;
}
#pe_wrapper {
width: 500px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.pe {
width: 100%;
overflow: auto;
margin-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #FFF;
}
.pe img {
width: 100px;
float: left;
margin-right: 10px;
}
#pe_container {
width: 350px;
overflow: auto;
float: right;
padding: 20px;
background: #FFF;
}
#pe_title {
padding-bottom: 10px;
margin-bottom: 15px;
border-bottom: 1px solid #DDD;
}
.no_1 {
margin-top: 20px;
}
}
#media only screen and (min-width: 640px) {
#nav {
width: 100%;
height: 55px;
background: red;
border-bottom: 1px solid #DDD;
position: absolute;
}
#outer {
top: 55px;
width: 100%;
position: absolute;
}
#wrapper {
}
#ne_wrapper {
background: purple;
width: 600px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.ne {
width: 100%;
min-height: 150px;
overflow: auto;
margin-top: 20px;
background: #FFF;
position: relative;
}
.ne img {
width: 150px;
float: left;
position: absolute;
z-index: 100;
}
#ne_container {
width: 410px;
margin: 20px;
float: right;
}
#ne_title {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #DDD;
}
#ne_tag {
padding: 5px 0;
margin: 0;
position: absolute;
z-index: 200;
top: 0;
left: 0;
background: rgba(67, 149, 142, 0.85);
}
#ne_tag small {
color: #FFF;
margin: 0;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
#te_wrapper {
width: 600px;
height: auto;
margin: 40px auto;
padding-left: 20px;
padding-right: 20px;
}
.te {
width: 600px;
height: auto;
padding: 0;
position: relative;
overflow: auto;
}
.te img {
width: 350px;
float: left;
position: relative;
}
#te_container {
width: 250px;
margin: 0;
float: right;
position: inherit;
}
#te_tag {
padding: 5px 0;
margin: 0;
position: absolute;
z-index: 200;
top: 0;
left: 0;
background: rgb(67, 149, 142);
}
#te_tag small {
color: #FFF;
margin: 0;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
#te_title {
width: 220px;
float: left;
padding: 15px;
background: rgba(255, 255, 255, 0.95);
}
#te_title h1 {
float: left;
}
#te_details {
width: 220px;
float: left;
margin-top: 1px;
padding: 15px;
background: rgba(255, 255, 255, 0.95);
}
#te_description {
display: none;
}
#pe_wrapper {
width: 600px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.pe {
width: 100%;
overflow: auto;
margin-top: 20px;
background: #FFF;
}
.pe img {
width: 120px;
float: left;
}
#pe_title {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #DDD;
}
#pe_container {
width: 440px;
margin: 20px;
float: left;
}
}
#media only screen and (min-width: 760px) {
#wrapper {
}
#ne_wrapper {
width: 720px;
}
#ne_container {
width: 530px;
}
#te_wrapper {
width: 720px;
margin-bottom: 20px;
}
.te {
width: 720px;
}
#te_container {
width: 370px;
}
#te_title {
width: 340px;
}
#te_details {
max-width: 340px;
}
#pe_wrapper {
width: 720px;
overflow: auto;
}
#st {
width: 350px;
float: left;
}
#nd {
width: 350px;
float: right;
}
.pe {
width: 350px;
height: 457px;
position: relative;
}
.pe img {
width: 350px;
}
#pe_container {
width: 310px;
margin: 10px;
padding: 10px;
height: auto;
position: absolute;
bottom: 0;
background: #FFF;
}
}
#media only screen and (min-width: 1020px) {
#wrapper {
width: 980px;
margin: 0 auto;
}
#ne_wrapper {
width: 910px;
float: left;
}
.ne {
width: 700px;
background: transparent;
border-left: 10px solid rgb(67, 149, 142);
}
#ne_inner {
margin-left: 20px;
}
#ne_tag {
display: none;
}
#ne_container {
width: 490px;
min-height: 110px;
background: #FFF;
padding: 20px;
margin: 0;
}
#te_wrapper {
width: 940px;
}
.te {
width: 740px;
}
#te_container {
width: 340px;
padding: 20px;
background: #FFF;
}
#te_title,
#te_details {
margin: 0;
padding: 0;
}
#te_title {
padding-bottom: 10px;
border-bottom: 1px solid #DDD;
}
#te_details {
padding-top: 10px;
}
#pe_wrapper {
width: 940px;
clear: both;
}
#st,
#nd {
width: 100%;
float: left;
clear: both;
}
.pe {
width: 300px;
height: 405px;
float: left;
background: #FFF;
}
.pe img {
width: 300px;
}
#pe_container {
width: 260px;
}
.no_1,
.no_2,
.no_4,
.no_5 {
margin-right: 20px;
}
}
#media only screen and (min-width: 1280px) {
#wrapper {
width: 1120px;
margin: 0 auto;
overflow: auto;
}
#ne_wrapper {
width: 1090px;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
float: left;
padding-bottom: 20px;
}
.ne {
width: 730px;
}
#ne_container {
width: 520px;
}
#te_wrapper {
width: 1120px;
}
.te {
width: 1120px;
height: 360px;
position: relative;
}
.te img {
width: 360px;
position: absolute;
z-index: 100;
}
#te_container {
width: auto;
position: absolute;
z-index: 200;
top: 20px;
left: 350px;
margin: 0;
padding: 0;
background: transparent;
}
#te_tag {
background: rgb(67, 149, 142);
}
#te_title {
width: auto;
max-width: 730px;
overflow: auto;
float: none;
padding: 20px;
margin: 0;
margin-top: 28px;
background: #FFF;
border-bottom: 1px solid #F4F1EB;
}
#te_details {
float: none;
overflow: auto;
padding: 20px;
margin: 0;
background: #FFF;
border-bottom: 1px solid #F4F1EB;
}
#te_description {
display: block;
width: 730px;
position: absolute;
z-index: 200;
margin: 0;
padding: 20px;
background: #FFF;
}
#te_description h5 {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
#pe_wrapper {
width: 1120px;
margin: 0 auto;
clear: both;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
#st,
#nd {
width: 100%;
float: left;
clear: both;
}
.pe {
width: 360px;
height: 480px;
}
.pe img {
width: 360px;
}
#pe_container {
width: 300px;
margin: 20px;
}
.no_1,
.no_2,
.no_4,
.no_5 {
margin-right: 20px;
}
}
#media only screen and (min-width: 1360px) {
}
Your media queries are not correct
#media only screen and (max-width: 639px) { }
#media only screen and (min-width: 640px) { }
#media only screen and (min-width: 760px) { }
#media only screen and (min-width: 1020px) { }
#media only screen and (min-width: 1280px) { }
#media only screen and (min-width: 1360px) { }
This will result in applying styles of #media only screen and (max-width: 639px) { } because all other media queries are overridden by it as you have given min-width to all queries, thus it takes lowest min-width and applies it for all sizes.
Change it to
#media only screen and (max-width: 639px) { }
#media only screen and (min-width: 640px) and (max-width: 759px) { }
#media only screen and (min-width: 760px) and (max-width: 1019px) { }
#media only screen and (min-width: 1020px) and (max-width: 1279px) { }
#media only screen and (min-width: 1280px) and (max-width: 1359px) { }
#media only screen and (min-width: 1360px) { }
To explain you media queries in detail, refer css getting changed when applying css media queries for responsive design
I will also put some part of that answer here for further reviews of this post.
include this in <head></head> (if you have not)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
Example
#media all and (min-width: 500px) {
}
#media all and (max-width: 500px) and (min-width: 300px) {
}
#media all and (max-width: 299px) {
}