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

327 Points

1767 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

45489 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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

‹ Previous Thread|Next Thread ›