Answered by:
My box shadow does not show up

Question
-
User1991482975 posted
Hi, i have a div
.ch-home-salons
wich should have a boxshadow and inside 2 divs col-6
.ch-home-salons-col1
.ch-home-salons-col2
i do not understand why my box shadow does not show up, this is the code :css
.ch-home-salons { padding:0; margin:0; margin-top:20px; background-color: #fff; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); border: 2px solid #BB4687; /* just to try if border works and also does not appear */ } .ch-home-salons-col1 { padding:0; margin:0; background-color: #fff; background-repeat: no-repeat; background-size: cover; height: 200px; min-height: 200px; width: 50%; /* may not be necessary */ } .ch-home-salons-col2 { padding:0; margin:0; background-color: #fff; height: 200px; min-height: 200px; width: 50%; /* may not be necessary */ } .ch-home-salons-header { background-color: #ffffff; color: #2B3542; } .ch-home-salons-header h2 { font-family: 'Fjalla One', sans-serif; font-size: 2.1rem; font-weight: normal; text-align:center; padding-bottom: 10px; } .ch-home-salons-description { font-family: 'Fjalla One', sans-serif; font-size: 1.6rem; color: #767676; font-weight: normal; min-height: 200px; max-width: 250px; } .ch-home-salons-description p{ text-align:center; padding-bottom: 10px; } .ch-home-salons-go { vertical-align : bottom; ; bottom: 10px; left:10%; right:10%; margin-left:auto; margin-right:auto; } .ch-home-salons-go p{ text-align:center; } /* Bootstrap */ .ch-home-salons-btn { font-family: 'Fjalla One', sans-serif; font-size: 1.2em; background: #f1f1f1; background-image: none; border: 1px solid #2B3542; border-radius: 0px; color: #2B3542; letter-spacing: 3px; font-weight: 100; text-decoration: none ! important; text-shadow: none; text-transform: uppercase; padding:5%; } .ch-home-salons-btn:hover { background: #2B3542; color: #ffffff; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
html
<div class="row ch-home-salons-top-row"> <div class="col-xs-12 col-sm-6 col-md-6"> <a itemprop="contentURL" href="/Creation/CreationDetails/4408/chignon-tressage" title="" rel="bookmark" data-original-title="Chignon/tressage"> <div class="ch-home-salons"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col1" style="background-image: url('http://www.collectionhair.com/Content/UserSalons/2016-12-07-020052-e2d975b0-parrucchiere-a-domicilio-caluso-mazze-200.jpg');"></div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col2"> <header class="ch-home-salons-header"> <h2>Caluso e Mazzé parrucchiera a domicilio </h2> </header> <div class="ch-home-salons-description"> <p> Via San Michele 22<br /> 10035 - Mazzé<br /> 3475939594 </p> </div> <div class="ch-home-salons-go"> <p class="ch-home-salons-btn">Decuvrir</p> </div> </div> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <a itemprop="contentURL" href="/Creation/CreationDetails/4408/chignon-tressage" title="" rel="bookmark" data-original-title="Chignon/tressage"> <div class="ch-home-salons"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col1" style="background-image: url('http://www.collectionhair.com/Content/UserSalons/2016-12-07-020052-e2d975b0-parrucchiere-a-domicilio-caluso-mazze-200.jpg');"></div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col2"> <header class="ch-home-salons-header"> <h2>Caluso e Mazzé parrucchiera a domicilio </h2> </header> <div class="ch-home-salons-description"> <p> Via San Michele 22<br /> 10035 - Mazzé<br /> 3475939594 </p> </div> <div class="ch-home-salons-go"> <p class="ch-home-salons-btn">Decuvrir</p> </div> </div> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <a itemprop="contentURL" href="/Creation/CreationDetails/4408/chignon-tressage" title="" rel="bookmark" data-original-title="Chignon/tressage"> <div class="ch-home-salons"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col1" style="background-image: url('http://www.collectionhair.com/Content/UserSalons/2016-12-07-020052-e2d975b0-parrucchiere-a-domicilio-caluso-mazze-200.jpg');"></div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col2"> <header class="ch-home-salons-header"> <h2>Caluso e Mazzé parrucchiera a domicilio </h2> </header> <div class="ch-home-salons-description"> <p> Via San Michele 22<br /> 10035 - Mazzé<br /> 3475939594 </p> </div> <div class="ch-home-salons-go"> <p class="ch-home-salons-btn">Decuvrir</p> </div> </div> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <a itemprop="contentURL" href="/Creation/CreationDetails/4408/chignon-tressage" title="" rel="bookmark" data-original-title="Chignon/tressage"> <div class="ch-home-salons"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col1" style="background-image: url('http://www.collectionhair.com/Content/UserSalons/2016-12-07-020052-e2d975b0-parrucchiere-a-domicilio-caluso-mazze-200.jpg');"></div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col2"> <header class="ch-home-salons-header"> <h2>Caluso e Mazzé parrucchiera a domicilio </h2> </header> <div class="ch-home-salons-description"> <p> Via San Michele 22<br /> 10035 - Mazzé<br /> 3475939594 </p> </div> <div class="ch-home-salons-go"> <p class="ch-home-salons-btn">Decuvrir</p> </div> </div> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <a itemprop="contentURL" href="/Creation/CreationDetails/4408/chignon-tressage" title="" rel="bookmark" data-original-title="Chignon/tressage"> <div class="ch-home-salons"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col1" style="background-image: url('http://www.collectionhair.com/Content/UserSalons/2016-12-07-020052-e2d975b0-parrucchiere-a-domicilio-caluso-mazze-200.jpg');"></div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col2"> <header class="ch-home-salons-header"> <h2>Caluso e Mazzé parrucchiera a domicilio </h2> </header> <div class="ch-home-salons-description"> <p> Via San Michele 22<br /> 10035 - Mazzé<br /> 3475939594 </p> </div> <div class="ch-home-salons-go"> <p class="ch-home-salons-btn">Decuvrir</p> </div> </div> </div> </a> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <a itemprop="contentURL" href="/Creation/CreationDetails/4408/chignon-tressage" title="" rel="bookmark" data-original-title="Chignon/tressage"> <div class="ch-home-salons"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col1" style="background-image: url('http://www.collectionhair.com/Content/UserSalons/2016-12-07-020052-e2d975b0-parrucchiere-a-domicilio-caluso-mazze-200.jpg');"></div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col2"> <header class="ch-home-salons-header"> <h2>Caluso e Mazzé parrucchiera a domicilio </h2> </header> <div class="ch-home-salons-description"> <p> Via San Michele 22<br /> 10035 - Mazzé<br /> 3475939594 </p> </div> <div class="ch-home-salons-go"> <p class="ch-home-salons-btn">Decuvrir</p> </div> </div> </div> </a> </div> </div>
who can help me in sort it out?
Friday, December 16, 2016 11:20 AM
Answers
-
User-271186128 posted
Hi grafic.web,
My box shadow does not show upAs for this issue, I suggest you could use F12 Developer Tools to Debug HTML and CSS.
First, please make sure the box-shadow CSS is not covered by the bootstrap CSS. If it is covered, you could use the "!important" keyword. Code like this:
box-shadow: 10px 10px 5px #888888 !important;
Besides, I suggest you modify your code as below: Change the css class position.
<div class="col-xs-12 col-sm-6 col-md-6 ch-home-salons "> <a itemprop="contentURL" href="/Creation/CreationDetails/4408/chignon-tressage" title="" rel="bookmark" data-original-title="Chignon/tressage"> <div class="
ch-home-salons"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col1" style="background-image: url('http://www.collectionhair.com/Content/UserSalons/2016-12-07-020052-e2d975b0-parrucchiere-a-domicilio-caluso-mazze-200.jpg');"></div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ch-home-salons-col2"> <header class="ch-home-salons-header"> <h2>Caluso e Mazzé parrucchiera a domicilio </h2> </header> <div class="ch-home-salons-description"> <p> Via San Michele 22<br /> 10035 - Mazzé<br /> 3475939594 </p> </div> <div class="ch-home-salons-go"> <p class="ch-home-salons-btn">Decuvrir</p> </div> </div> </div> </a> </div>Best regards,
Dillion- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, December 19, 2016 3:11 AM