CODEWITHSUNDEEP
htmlcsssass
Богдан Чубко
Богдан Чубко

Reputation: 405

How to make block's width the same to content?

I need to make shadow around every <div class='shadow'> but every item has width more then content and you can see on the photo (i made blue background to make it visible) what I have... So how to width appropriate to content?

HTML

 <div className="col-md-4 cycling-training">
    <div className='shadow'>
       <div>
          <img className='fea1' alt='feature1' src={feature1}/>
       </div>
       <div className='fea-footer'>
           <h4>Cycling Training</h4>
           {text1}
       </div>
   </div>
</div>

SASS

.featured-box //main container
    margin: 80px 0 0 0
    background-color: #dfdfdf6e
    width: 100%
    height: auto
    text-align: center
    .title-featured
        font-size: 35px
        font-weight: bold
        text-transform: uppercase
        padding: 90px 0 60px 0        
    .cycling-training, .tone-muscle, .meditation-work
        padding: 0
        .fea-footer
            background-color: #ffffff
            width: 95%
            height: auto
            margin-left: 10px
            h4,h5,h6 
                text-transform: uppercase
                font-weight: bold
                font-size: 18px
                padding: 25px 0 12px 0
            p 
                padding: 0 35px 40px 35px
                color: $body-text

.shadow
    background: blue
    display: inline-block
    padding: 0 !important
    margin: 0 !important
    &:hover
        border: 2px solid blue

enter image description here

Upvotes: 2

Views: 52

Answers (1)

focus.style
focus.style

Reputation: 6760

SASS

.featured-box //main container
    margin: 80px 0 0 0
    background-color: #dfdfdf6e
    width: 100%
    height: auto
    text-align: center
    .title-featured
        font-size: 35px
        font-weight: bold
        text-transform: uppercase
        padding: 90px 0 60px 0        
    .tone-muscle, .meditation-work /* removed .cycling-training, for standard bootstrap col paddings works */
        padding: 0
        .shadow img /* add this */
            width:100%;
        .fea-footer
            background-color: #ffffff
            width: 100% /* fixed it */
            height: auto
            margin-left: 0px /* fixed it */
            h4,h5,h6 
                text-transform: uppercase
                font-weight: bold
                font-size: 18px
                padding: 25px 0 12px 0
            p 
                padding: 0 35px 40px 35px
                color: $body-text

.shadow
    background: blue
    display: inline-block
    padding: 0 !important
    margin: 0 !important
    &:hover
        border: 2px solid blue

Upvotes: 1

Related Questions