Menu icon Foundation
Custom button color being overridden at phone size

We thought we understood how to override the button color to create a custom button color (and also custom colors on input fields). It does work UNTIL we get down to phone sizes and something in the code seems to override the call to css we wrote.

http://johngamache.com/testbed/contact.html

shows the problem. When you narrow it down to phone size (actually it seems, just past vertical tablet size if you resize a browser window) the buttons go from the custom color to blue. The html containing the button is:

    <div class="small-10 medium-9 columns">
              <textarea name="msg" rows="5"></textarea>
              <button type="submit" class="radius button jgbutt">Submit</button>
    </div>

         

note the custom class jgbutt

Since we have that class and some other stuff we have an added css called. The relevant portions of that are:

.button.jgbutt {
  background-color: #c7bda4;
  border-color: #c7bda4;
  color: #515605;
}

.button.jgbutt:hover, .button.jgbutt:focus {
background-color: #b0a893;
}
            

         

Now once we get down to the phone size, for some reason, the css from Slick (style.css) suddenly overrides the button color, which it does not do up until then (if I comment out the call to that css the problem goes away). Here is the entire contents of that css (it is small) including what we have changed and does include button.

#disqus_thread{margin-top:0;}
*{-moz-box-sizing:border-box;box-sizing:border-box;}

.button{background:#3498db;color:#fff;display:block;font-size:16px;margin:20px auto;padding:20px;text-align:center;text-decoration:none;width:48%;}
.buttons{padding:0 20px 20px; margin-bottom: 10px;}
.buttons .button{background:#FFF;color:#3498db;float:left;margin:5px;}
.center .slick-center h3{-moz-transform:scale(1.08);-ms-transform:scale(1.08);-o-transform:scale(1.08);-webkit-transform:scale(1.08);color:#e67e22;opacity:1;transform:scale(1.08);}
.center h3{opacity:0.8;transition:all 300ms ease;}
.content{margin:auto;padding:20px;width:600px;}
.content:after,.buttons::after{clear:both;content:"";display:table;}
.destroy{font-weight:400;margin-top:40px;}
.features{display:block;list-style-type:none;margin-top:30px;padding:0;text-align:center;}
.features li{margin:20px 0;}
.filter .button{background:#FFF;color:#3498db; margin-bottom: 40px;}
.fixed-header{background:#FFF;box-shadow:2px 0 5px rgba(0,0,0,0.5);display:none;padding:10px;position:fixed;top:0;width:100%;z-index:10000;}
.fixed-header .header-content{margin:auto;width:600px;}
.fixed-header .subheading{display:none;}
/*.fixed-header h1.title{float:left;font-size:24px;margin:0;}*/
.fixed-header ul.nav{float:right;margin:0;padding:5px;}
.fixed-header ul.nav li{margin:0 0 0 10px;}
.header{padding:20px 0;}
.margin-40{margin-bottom:40px;}
.more,.button.first{margin-top:40px;}
.red{background:#e74c3c;color:#fff;}
/*.slick-slide .image{padding:10px;}*/
.slick-slide img{display:block;width:100%;}
.slick-slide img.slick-loading{border:0 }
.slick-slider{margin:0 auto 0px;}
.subheading{color:#555;font-size:12px;font-style:italic;font-weight:400;margin:10px auto;text-align:center;}
.white{background:#fff;color:#3498db;}
.white pre,.white hr{background:#3498db;}
/*a{color:#3498db;}*/
code{color:#000; overflow-x: scroll;}
/*h1{color:#3498db;font-family:Pacifico;font-size:72px;font-weight:400;line-height:1.2;margin:0 auto 10px;text-align:center;}
h1.title{font-size:96px;}*/
/*h2{font-family:Pacifico;font-size:36px;margin:20px auto;text-align:center;}
h4{font-family:Pacifico;font-size:28px;margin:20px auto;text-align:center;}
hr{background:#fff;border:0;height:1px;margin:40px 0;}*/
/*p{font-size:18px;font-weight:700;line-height:1.5;margin-bottom:40px;text-align:center;}
p.note{font-size: 12px;}
p.cdn{font-size: 14px;}
p.guff{font-size:16px;}*/
pre{background:#fff;margin:0 10px 20px;padding:10px;}
section{width:100%;}
            

         

Now the slick js is being called on that page but there is no slick implementation script being called. Clearly we can fix this problem by not having the slick js or css called (actually, just not calling the slick css fixes the problem) but what if we needed both on the page and, more importantly, WHY does it override only at the small size.

Discerning minds what to know! ;-)

Also, why don't programmers in css prefix classes that are obviously highly likely to be used by others too, such as using .slick-button & .fndtn-button instead of just .button so there won't be conflicts? It is standard practice in many other code disciplines I have used and has obvious advantages.

button coloroverrideslickcustom buttoncustom colorcss

We thought we understood how to override the button color to create a custom button color (and also custom colors on input fields). It does work UNTIL we get down to phone sizes and something in the code seems to override the call to css we wrote.

http://johngamache.com/testbed/contact.html

shows the problem. When you narrow it down to phone size (actually it seems, just past vertical tablet size if you resize a browser window) the buttons go from the custom color to blue. The html containing the button is:

    <div class="small-10 medium-9 columns">
              <textarea name="msg" rows="5"></textarea>
              <button type="submit" class="radius button jgbutt">Submit</button>
    </div>

         

note the custom class jgbutt

Since we have that class and some other stuff we have an added css called. The relevant portions of that are:

.button.jgbutt {
  background-color: #c7bda4;
  border-color: #c7bda4;
  color: #515605;
}

.button.jgbutt:hover, .button.jgbutt:focus {
background-color: #b0a893;
}
            

         

Now once we get down to the phone size, for some reason, the css from Slick (style.css) suddenly overrides the button color, which it does not do up until then (if I comment out the call to that css the problem goes away). Here is the entire contents of that css (it is small) including what we have changed and does include button.

#disqus_thread{margin-top:0;}
*{-moz-box-sizing:border-box;box-sizing:border-box;}

.button{background:#3498db;color:#fff;display:block;font-size:16px;margin:20px auto;padding:20px;text-align:center;text-decoration:none;width:48%;}
.buttons{padding:0 20px 20px; margin-bottom: 10px;}
.buttons .button{background:#FFF;color:#3498db;float:left;margin:5px;}
.center .slick-center h3{-moz-transform:scale(1.08);-ms-transform:scale(1.08);-o-transform:scale(1.08);-webkit-transform:scale(1.08);color:#e67e22;opacity:1;transform:scale(1.08);}
.center h3{opacity:0.8;transition:all 300ms ease;}
.content{margin:auto;padding:20px;width:600px;}
.content:after,.buttons::after{clear:both;content:"";display:table;}
.destroy{font-weight:400;margin-top:40px;}
.features{display:block;list-style-type:none;margin-top:30px;padding:0;text-align:center;}
.features li{margin:20px 0;}
.filter .button{background:#FFF;color:#3498db; margin-bottom: 40px;}
.fixed-header{background:#FFF;box-shadow:2px 0 5px rgba(0,0,0,0.5);display:none;padding:10px;position:fixed;top:0;width:100%;z-index:10000;}
.fixed-header .header-content{margin:auto;width:600px;}
.fixed-header .subheading{display:none;}
/*.fixed-header h1.title{float:left;font-size:24px;margin:0;}*/
.fixed-header ul.nav{float:right;margin:0;padding:5px;}
.fixed-header ul.nav li{margin:0 0 0 10px;}
.header{padding:20px 0;}
.margin-40{margin-bottom:40px;}
.more,.button.first{margin-top:40px;}
.red{background:#e74c3c;color:#fff;}
/*.slick-slide .image{padding:10px;}*/
.slick-slide img{display:block;width:100%;}
.slick-slide img.slick-loading{border:0 }
.slick-slider{margin:0 auto 0px;}
.subheading{color:#555;font-size:12px;font-style:italic;font-weight:400;margin:10px auto;text-align:center;}
.white{background:#fff;color:#3498db;}
.white pre,.white hr{background:#3498db;}
/*a{color:#3498db;}*/
code{color:#000; overflow-x: scroll;}
/*h1{color:#3498db;font-family:Pacifico;font-size:72px;font-weight:400;line-height:1.2;margin:0 auto 10px;text-align:center;}
h1.title{font-size:96px;}*/
/*h2{font-family:Pacifico;font-size:36px;margin:20px auto;text-align:center;}
h4{font-family:Pacifico;font-size:28px;margin:20px auto;text-align:center;}
hr{background:#fff;border:0;height:1px;margin:40px 0;}*/
/*p{font-size:18px;font-weight:700;line-height:1.5;margin-bottom:40px;text-align:center;}
p.note{font-size: 12px;}
p.cdn{font-size: 14px;}
p.guff{font-size:16px;}*/
pre{background:#fff;margin:0 10px 20px;padding:10px;}
section{width:100%;}
            

         

Now the slick js is being called on that page but there is no slick implementation script being called. Clearly we can fix this problem by not having the slick js or css called (actually, just not calling the slick css fixes the problem) but what if we needed both on the page and, more importantly, WHY does it override only at the small size.

Discerning minds what to know! ;-)

Also, why don't programmers in css prefix classes that are obviously highly likely to be used by others too, such as using .slick-button & .fndtn-button instead of just .button so there won't be conflicts? It is standard practice in many other code disciplines I have used and has obvious advantages.

Adrian Rogowski about 5 years ago

It looks like you are missing a closing } on line 228 of gamache.css which is putting everything underneath it in a media query for medium-up. I added it in my inspect element and everything looked fine after that.

Hope this helps!

Denn about 5 years ago

Thanks Adrian. That was absolutely a part of the problem.

Fixing that borked something else but at least we should be able to hunt that down.

Still, odd that just commenting out the css from Slick (style.css) also fixed the problem (since the slick css was loading before the gamache.css and the slick css doesn't seem to have any media query components to it. Still trying to wrap my head around how all the components interact. Has some elements of oop (which I am quite familiar with) but also some contradictions.