locked
My box shadow does not show up RRS feed

  • 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 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