CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bill Noble
Bill Noble

Reputation: 6744

Bootstrap - How to keep image centred when browser is shrunk

With my Bootstrap 3.0 site I am struggling to keep an image centred when the browser is shrunk. When the screen goes below a certain width the image jumps to the left side of the screen and is no longer centred. My code is:

#sliderScale {
		opacity: 0.6;/* 0.4; */
		filter: alpha(opacity=60); /*alpha(opacity=40);*/ /* For IE8 and earlier */
		width:311px;
		max-width:311px;
		padding:0px;
		margin: 0 auto;
	} 
#maxCostSlider {
		max-width:304px;
		width:304px;
		padding:0px;
		margin-left:-6px;
	}
	
	@media (max-width: 480px) {
    #maxCostSlider,#sliderScale {
        margin-left: 20px;
        margin-right: 20px;
		max-width: 260px;
    }
	}
    <div class="container">
        <div class="row">
            <div class="col-md-offset-4 col-md-4" style="padding-left:4px;padding-right:4px">
            <img id="sliderScale" src="/assets/img/price slider 1.png" alt="" class="img-responsive"/>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-md-offset-4 col-md-4" style="margin-top:-44px;padding-left:4px;padding-right:4px">
            <input id="maxCost" data-slider-id='maxCostSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="40" />
            </div>
        </div>
    </div>

The data-slider stays centred correctly but not the sliderScale.

Upvotes: 0

Views: 101

Answers (4)

ben.kaminski
ben.kaminski

Reputation: 976

This should help, your media query was causing the issue:

JSFIDDLE

@media (max-width: 480px) {
#maxCostSlider,#sliderScale {
    max-width: 100%;
}}

Give it a try!

Upvotes: 1

Morpheus
Morpheus

Reputation: 9065

Add the .text-center class or extend style attribute with text-align: center on the following div:

<div class="col-md-offset-4 col-md-4 text-center"></div>

Upvotes: 0

Becandoo
Becandoo

Reputation: 86

Try adding this to your #sliderScale css tag:

 margin: 0 auto !important;

by adding the important, you ensure that nothing can override it.

Upvotes: 1

Zeeba
Zeeba

Reputation: 1122

when using col-md-offset-4 col-md-4 also add col-sm or xs-(wherever you want it) when the screen shrinks to the SM or XS size it will pick up that code. hope this helps.

Upvotes: 0

Related Questions