Tom Nulty Tom Nulty - 5 months ago 17
CSS Question

Bootstrap img-responsive class not working correctly

I am currently having a problem where the bootstrap

img-responsive
class isn't working as it should due to me needing the image to be as far right in the div box as possible. I have two identically sized arrows which surrounds titles of my site. When the browser is scaled down to mobile size, the left arrow appears smaller and more distorted than the right counterpart.

Full Sized Title
Full sized title

Phone Sized Title

Phone Sized Title

HTML:

<div class="row">
<div class="col-lg-3"> </div>
<div class="col-xs-3 col-lg-2 arrow-right">
<img class="img-responsive img-right" src="img/arrow-right.png" alt="">
</div>
<div class="col-xs-6 col-lg-2 text-center">
<h2 class="section-heading">RSVP</h2>
</div>
<div class="col-xs-3 col-lg-2 arrow-left">
<img class="img-responsive img-left" src="img/arrow-left.png" alt="">
</div>
<div class="col-lg-3"> </div>
</div>


CSS:

.arrow-right {
padding-top: 12px;
}

.arrow-left {
padding-top: 12px;
padding-left: 0;
}
@media (min-width: 768px) {

.img-right {
display: block;
margin: auto;
margin-left: 34px;

}
.img-left {
margin: auto;
margin-right: 30px;
}

}


My question would be, is there an easier way to get these arrows as close to the titles as possible and have them scale down to phone sized perfectly?

Answer

Change the XS and make 4/4/4

<div class="row">
            <div class="col-lg-3"> </div> 
            <div class="col-xs-4 col-lg-2 arrow-right">
                <img class="img-responsive img-right" src="img/arrow-right.png" alt="">
            </div>
                <div class="col-xs-4 col-lg-2 text-center">
                    <h2 class="section-heading">RSVP</h2>
                </div>
            <div class="col-xs-4 col-lg-2 arrow-left">
                <img class="img-responsive img-left" src="img/arrow-left.png" alt="">
            </div>
            <div class="col-lg-3"> </div>
        </div>