Olen
Reputation: 1195
Responsive in Chrome, but not on mobile
I am using WP-skeleton, and modifing it to fit into my website. However, my website is currently only responsive in Chrome on my PC, and not on my phone.
The divs are changing the size Chrome, e.g the pictures on front page (class imagebox) are 420px when screen size is 48px, and 300px when screen size is 960px. On my phone everything is like the base 960px grid all the time, and does not resizes after the current screen size.
Could you guys help me out?
/*
Theme Name: WP-Skeleton
Theme URI: https://github.com/wycks/WP-Skeleton-Theme
Author: Wycks
Author URI: wpsecure.net
Description: Responsive Bare Bones framework based on Dave Gamache's getskeleton.com
Version: 1.0
License: http://www.opensource.org/licenses/mit-license.php.
Tags: Responsive, grid, mobile, framework, bare-bones, white, minimal
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* Table of Contents
==================================================
#Base 960 Grid
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape)
#Clearing */
/* #Base 960 Grid
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .imagebox.columns { width: 300px; margin-left: 30px; margin-top: 30px;}
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }
.container .column,
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.container .one.column { width: 28px; }
.container .two.columns { width: 76px; }
.container .three.columns { width: 124px; }
.container .four.columns { width: 172px; }
.container .five.columns { width: 220px; }
.container .imagebox.columns { width: 240px; margin-left: 23px; margin-top: 23px; }
.container .six.columns { width: 268px; }
.container .seven.columns { width: 316px; }
.container .eight.columns { width: 364px; }
.container .nine.columns { width: 412px; }
.container .ten.columns { width: 460px; }
.container .eleven.columns { width: 508px; }
.container .twelve.columns { width: 556px; }
.container .thirteen.columns { width: 604px; }
.container .fourteen.columns { width: 652px; }
.container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; }
/* Offsets */
.container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; }
.container .offset-by-three { padding-left: 144px; }
.container .offset-by-four { padding-left: 192px; }
.container .offset-by-five { padding-left: 240px; }
.container .offset-by-six { padding-left: 288px; }
.container .offset-by-seven { padding-left: 336px; }
.container .offset-by-eight { padding-left: 348px; }
.container .offset-by-nine { padding-left: 432px; }
.container .offset-by-ten { padding-left: 480px; }
.container .offset-by-eleven { padding-left: 528px; }
.container .offset-by-twelve { padding-left: 576px; }
.container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; }
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container { width: 300px; }
.columns, .column { margin: 0 10px; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 280px; }
.container .imagebox.columns { width: 300px; margin-left: 0px; margin-top: 5px; clear: both;}
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
/* Float menu left now*/
.menu ul {float:left;}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.columns, .column { margin: 0 10px; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 400px; }
.container .imagebox.columns {width: 420px; margin-top: 10px; clear: both;}
/* Float menu left now*/
.menu ul {float:left;}
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
img.scale-with-grid {
max-width: 100%;
height: auto; }
/* #Base NAV 960 Grid
================================================== */
nav {
padding-top: 10px;
text-align:center;
margin: 0 auto;
}
nav ul {
display: inline;
list-style-type: none;
padding-left: 0px;
}
nav li {
display: inline;
padding-left: 55px;
padding-right: 55px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 300;
}
nav li a:hover {
color:#808080;
-webkit-transition: all 0.3s ease-in-out;
}
nav li a {
color: #282828;
text-decoration: none;
font-size: medium;
}
.nav-button { display: none; }
.logoo { display: none; }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
nav li {
padding-left: 20px;
padding-right: 20px;
}
}
@media only screen and (min-width: 0px) and (max-width: 767px) {
/* Navigation Button
-------------------------------------------------------- */
nav ul img {
display: none;
}
.logoo {
display: inline;
width: 150px;
margin-top: 0px;
margin: 0 auto;
}
.nav-button {
display: block;
position: absolute;
top: 7px;
left: 7px;
width: 50px;
height: 35px;
background: url('../images/menu-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/menu-icon-large.png'), -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/menu-icon-large.png'), -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/menu-icon-large.png'), -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-position: center center;
background-repeat: no-repeat;
background-size: 21px, 100%;
cursor: pointer;
border: 0 none;
border-bottom: 1px solid rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.7) inset;
border-radius: 5px;
z-index: 999;
text-indent: -9999px;
}
.nav-button:hover {
background-color: rgba(0,0,0,.1);
}
.nav-button.open {
background: url('../images/close-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/close-icon-large.png'), -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/close-icon-large.png'), -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/close-icon-large.png'), -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-position: center center;
background-repeat: no-repeat;
background-size: 21px, 100%;
}
/* Navigation Bar
-------------------------------------------------------- */
body { padding-top: 50px; }
nav {
width: 100%;
float: none;
background-color: #b0b0b0; /* change the menu color */
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
display: block;
height: 50px;
margin: 0;
padding: 0;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,.6);
position: absolute;
left: 0px;
z-index: 998;
clear: both;
}
nav li {
display: none;
width: 100%;
}
nav li a {
display: block;
width: 90%;
padding: 10px 5%;
font-size: 14px;
font-weight: bold;
text-shadow: -1px -1px 0 rgba(0,0,0,.15);
color: white;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.2);
border-top: 1px solid rgba(255,255,255,.1);
}
nav li a:hover {
background-color: rgba(0,0,0,.5);
border-top-color: transparent;
}
nav > li:first-child {
border-top: 1px solid rgba(0,0,0,.2);
}
/* Toggle the navigation bar open */
nav.open {
height: auto;
padding-top: 50px;
}
nav.open li {
display: block;
}
/* Submenus – optional .parent class indicates dropdowns */
nav > li:hover > a {
background: rgba(0,0,0,.5);
border-bottom-color: transparent;
}
nav li.parent > a:after {
content: "▼";
color: rgba(255,255,255,.5);
float: right;
}
nav li.parent > a:hover {
background: rgba(0,0,0,.75);
}
nav li ul {
display: none;
background: rgba(0,0,0,.5);
border-top: 0 none;
padding: 0;
}
nav li ul a {
border: 0 none;
font-size: 12px;
padding: 10px 5%;
font-weight: normal;
}
nav li:hover ul {
display: block;
border-top: 0 none;
}
}
Upvotes: 0
Views: 1549
Answers (1)
War10ck
Reputation: 12508
Make sure you add the viewport meta tag. At the bare minimum, you'll need the following:
<meta name="viewport" content="width=device-width">
Additional options are available as well. Check the reference link below for more information.
Reference: Mozilla Developer Network - Viewport Meta Tag
Upvotes: 3
Related Questions
- Responsive web design is working on desktop but not on mobile device
- Website responsive on desktop but not on mobile
- Responsive website works fine on Firefox responsive mode, but not in Chrome or Device
- Responsive layout not working on mobile
- Chrome Responsive Mode not displaying correctly
- The content is not responsive on mobile devices
- Website looks fine in PC at different widths but breaks in mobile phone
- Why does is my responsive website not responding to a mobile browser?
- Responsiveness Not Working on Mobile
- Responsive CSS works on regular browsers, not on mobile... why?