locked
My box shadow does not show up RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-271186128 posted

    Hi 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 19, 2016 3:11 AM