I have styling done for the submit form buttons on web, and when i maually resize my browser, the stying stays the same in smaller widths. But, when i videw on my Iphone 6, the stying looks like default drupal button.

Is there something is the base theme Bartik that is causing an override on true mobile?

I’m using Drupal 7 and only have 2 themes installed, My custome theme, and Seven for admin use.

.button, input[type="button"], input[type="submit"] {   padding: 7px 14px;   display: inline-block;   border: 0;   font-weight: 500;   outline: none;   font-size: 14px;   cursor: pointer;   width: auto;   -webkit-transition: all 0.2s ease-in-out;   -moz-transition: all 0.2s ease-in-out;   -o-transition: all 0.2s ease-in-out;   -ms-transition: all 0.2s ease-in-out;   transition: all 0.2s ease-in-out;   border-radius: 3px;   box-shadow: inset 0px -1px 0px 0px rgba(0,0,0, 0.1); }  .button i {   margin: 0 2px 0 0; }  .button.gray {   color: #fff;   background: #aaa; }  .button.gray:hover {   background: #a0a0a0; }  .button.light {   color:#999;   background:#f2f2f2;   box-shadow: inset 0px -1px 0px 0px rgba(0,0,0, 0.05); }  .button.light:hover {   color: #fff;   background: #a0a0a0;   box-shadow: inset 0px -1px 0px 0px rgba(0,0,0, 0.1); }  .button.color {   color:#fff; background: #a0a0a0; }  .button.color:hover {   background: #a0a0a0; }  /* Input Button */ input[type="button"], input[type="submit"], input[type="button"]:focus, input[type="submit"]:focus {   color:#fff;   background: #a0a0a0;   padding: 8px 14px;   border: none !important; }  input[type="button"], input[type="submit"] {   /*float: left;*/ }  input[type="button"]:hover, input[type="submit"]:hover {   background: #a0a0a0; } 

My Responsive Media Queries are in two sections

/* Standard 1180 (devices and browsers) */ @media only screen and (min-width: 1200px){   .caption.text { margin-left: 0 !important; }   .caption h2,   .caption h3,   .caption p {margin:0;} }  /* Smaller than standard 1180 (devices and browsers) */ @media only screen and (min-width: 959px) and (max-width: 1199px) {   .caption.text { margin-left: 50px !important; }   .caption h2,   .caption h3,   .caption p { margin:0; }    #navigation ul > li > a { padding-left: 15px; padding-right: 15px; }    ol li ol.childlist .comment-des {     float:right;     width:78%;   }    .comment-des {     float:right;     width: 81%;   }    .add-comment textarea,   #contact textarea { min-width: 97%; }    .flickr-widget-blog a {     width: 57px;     height: 57px;   }    #not-found { margin: 50px 0 75px 0; }    #not-found h2 {     font-size: 210px;     line-height: 210px;   }    #not-found p {     font-size: 28px;     line-height: 36px;   }    #not-found i {     font-size: 200px;     top: -5px;   }  }  /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) {   .caption.text { margin-left: 30px !important; }   .caption h2 { margin-top: -8px;}   .caption p { margin-top: 8px;}   .img-1 {margin-left: 0 !important;}    #navigation ul > li > a { padding-left: 14px; padding-right: 14px; }    #search-form {     position: absolute;     right:0;   }    .search-container { margin-left: 50px !important; }   .the-icons { font-size: 13px; }    ol li ol.childlist .comment-des {     float:right;     width:71%;   }   .comment-des {     float:right;     width: 75%;   }    .add-comment textarea,   #contact textarea { min-width: 96%; }    .flickr-widget-blog a {     width: 69px;     height: 69px;   }    #not-found {margin: 35px 0 60px 0;}    #not-found h2 {     font-size: 160px;     line-height: 160px;   }    #not-found i {     font-size: 155px;     top: -4px;   }    #not-found p {     font-size: 22px;     line-height: 32px;   }     #footer, #footer-bottom {text-align: center;}   .get-in-touch li i, .get-in-touch li p strong {float: none}   .get-in-touch p {margin: 0;}  }  /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) {    .caption.text {margin-left: 30px !important;}   .caption h2 {font-size: 32px; margin-top: 10px;}   .caption h3 {font-size: 20px; margin-top: 15px;}   .caption p {display: none;}   .img-1 {margin-left: 0 !important;}    .fullwidthbanner-container { top: 0; }    .showbiz.our-clients ul li img { margin: 0 auto; }    #breadcrumbs ul {     float: left;     margin-top: 0;     padding: 0 0 24px 0;   }    #titlebar {     top: 0;     margin-bottom: 40px;   }    #titlebar h2 {     margin-top: 3px;   }    #googlemaps { padding-bottom: 40%; }   .plan-features { margin-bottom: 25px; }   .medium .post-img { margin-bottom: 20px; }    #filters { margin: 10px 0 30px 0; }   #filters a { margin: 0 5px 5px 0; }   .line.filters { display: none; }    .line.showing {     display: inline-block;     margin: -11px 0 0 0;     z-index: 5;   }    .social-icons-footer {     margin-top: 5px;     float: left;   }    #footer { padding-top: 10px; }   #footer h3, #footer h2 { margin-top: 30px; }    .featured-boxes { margin: 40px 0 5px 0; }   .featured-box { margin: 0 0 25px 0; }    a.button.launch { margin: 0 0 30px 0; }   #related-work figure {margin-bottom: 20px;}    .search-form {     margin-top: 40px;     padding-top: 40px;     border-top: 1px solid #f0f0f0;   }    #contact input[type="submit"] {     margin: 0 0 30px 0;   }    #not-found {margin: 15px 0 25px 0;}    #not-found h2 {     font-size: 110px;     line-height: 120px;   }    #not-found i {     font-size: 105px;     top: -2px;   }    #not-found p {     font-size: 22px;     line-height: 32px;   }    #footer, #footer-bottom {text-align: center;}   .get-in-touch li i, .get-in-touch li p strong {float: none}   .get-in-touch p {margin: 0;}  }   /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {    ol li ol.childlist .comment-des {     float:right;     width:63%;   }    .comment-des {     float:right;     width: 68%;   }    .add-comment textarea,   #contact textarea { min-width: 95%; }    .flickr-widget-blog a {     width: 87px;     height: 87px;   }    #footer, #footer-bottom {text-align: center;}   .get-in-touch li i, .get-in-touch li p strong {float: none}   .get-in-touch p {margin: 0;}  }  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {    .caption h2 {font-size: 32px; margin-top: 0;}   .caption h3 {font-size: 18px; margin-top: 10px;}   .caption p {display: none}    ol li ol.childlist .comment-des {     float:right;     width:49%;   }    .comment-des {     float:right;     width: 56%;   }    .add-comment textarea,   #contact textarea { width: 90%; }    .flickr-widget-blog a {     width: 82px;     height: 82px;   }    .dropcap {font-size: 52px;}    #footer, #footer-bottom {text-align: center;}   .get-in-touch li i, .get-in-touch li p strong {float: none}   .get-in-touch p {margin: 0;} } 

The Second Media Queries CSS is only for layout purposes and shouldn’t effect anything but column widths.

Picture 1 is from Firefox on my desktop

Picture 2 is from my iphone 6 Safari

My Page code shows this for the viewport code: meta name=”viewport” content=”width=device-width, initial-scale=1″

My PHP is not rendering the final maximum-scale=1

Here is my PHP that is in my template.php file”

  function your_theme_name_preprocess_html(&$vars) { $viewport = array(   '#tag' => 'meta',   '#attributes' => array(     'name' => 'viewport',     'content' => 'width=device-width, initial-scale=1, maximum-scale=1',   ), );  drupal_add_html_head($viewport, 'viewport'); }