Blog

My box shadow does not show up [Answered]RSS

1 reply

Last post Dec 19, 2016 03:11 AM by Zhi Lv - MSFT

‹ Previous Thread|Next Thread ›

Shortcuts

grafic.web

Member

306 Points

1663 Posts

My box shadow does not show up

Dec 16, 2016 11:20 AM|grafic.web|LINK

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;
    position: absolute;
    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?

Your wish is your command!!!

Zhi Lv - MSF...

All-Star

45431 Points

7008 Posts

Microsoft

Re: My box shadow does not show up

Dec 19, 2016 03:11 AM|Zhi Lv - MSFT|LINK

Hi grafic.web,

grafic.web
My box shadow does not show up

As 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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›