Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by aidencornwell
aidencornwell
8,583 Points

Remove offset in responsive design media query

I am using a offset of 2 for my desktop layout which works well to center my image carousel. However in the responsive design area the media query offsets the carousel which I don't want to happen on phones. How do I remove the offset for smaller devices such as phones.

Garrett Levine
Garrett Levine
20,305 Points

if you post the code snippet it would be helpful to better understand the problem!

2 Answers

David Bath
David Bath
25,940 Points

col-xs-offset-2 will basically offset #slider for all devices (xs and higher). You can change that to be col-sm-offset-2 or col-md-offset-2 to remove the offset on smaller devices.

aidencornwell
aidencornwell
8,583 Points

Thanks that worked well

aidencornwell
aidencornwell
8,583 Points
aidencornwell
aidencornwell
8,583 Points 
<div class="container">
    <div id="main_area">
        <!-- Slider -->
        <div class="row">
            <div class="col-xs-12 col-xs-offset-2" id="slider">
                <!-- Top part of the slider -->
                <div class="row">
                    <div class="col-sm-8" id="carousel-bounding-box">
                        <div class="carousel slide" id="myCarousel">
                            <!-- Carousel items -->
                            <div class="carousel-inner">
                                <div class="active item" data-slide-number="0">
                                    <img src="img/home2/frontofhousew0.jpg"></div>

                                <div class="item" data-slide-number="1">
                                    <img src="img/home2/masterbedroom1w1.jpg"></div>

                                <div class="item" data-slide-number="2">
                                    <img src="img/home2/masterbedroom2w2.jpg"></div>

                                <div class="item" data-slide-number="3">
                                    <img src="img/home2/mrbdrmpaintingw3.jpg"></div>

                                <div class="item" data-slide-number="4">
                                    <img src="img/home2/ensuitew4.jpg"></div>

                                <div class="item" data-slide-number="5">
                                    <img src="img/home2/study1w5.jpg"></div>

                                <div class="item" data-slide-number="6">
                                    <img src="img/home2/gretrmw6.jpg"></div>

                                <div class="item" data-slide-number="7">
                                    <img src="img/home2/greatrm1w7.jpg"></div>

                                <div class="item" data-slide-number="8">
                                    <img src="img/home2/diningrmkitchenw8.jpg"></div>

                                <div class="item" data-slide-number="9">
                                    <img src="img/home2/dinningrmw9.jpg"></div>

                                <div class="item" data-slide-number="10">
                                    <img src="img/home2/kitchenw10.jpg"></div>

                                <div class="item" data-slide-number="11">
                                    <img src="img/home2/hallway1w11.jpg"></div>

                                <div class="item" data-slide-number="12">
                                    <img src="img/home2/hallstoragew12.jpg"></div>

                                <div class="item" data-slide-number="13">
                                    <img src="img/home2/laundryrmw13.jpg"></div>

                                <div class="item" data-slide-number="14">
                                    <img src="img/home2/2014ROshowerw5.jpg"></div>

                                <div class="item" data-slide-number="15">
                                    <img src="img/home2/3rdbedrm3w15.jpg"></div>

                                <div class="item" data-slide-number="16">
                                    <img src="img/home2/3rdbedrmw16.jpg"></div>

                                <div class="item" data-slide-number="17">
                                    <img src="img/home2/backyardfrdeck2w17.jpg"></div>

                                <div class="item" data-slide-number="18">
                                    <img src="img/home2/backyardfromdeck1w18.jpg"></div>

                                <div class="item" data-slide-number="19">
                                    <img src="img/home2/backyardfromdeck2w19.jpg"></div>

                                <div class="item" data-slide-number="20">
                                    <img src="img/home2/backyardvieww20.jpg"></div>

                                <div class="item" data-slide-number="21">
                                <img src="img/home2/bbqw21.jpg"></div>

                                <div class="item" data-slide-number="22">
                                    <img src="img/home2/bedroom2w22.jpg"></div>

                                <div class="item" data-slide-number="23">
                                    <img src="img/home2/bedroom1w23.jpg"></div>

                            </div>

                            <!-- Carousel nav -->
                            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                    </div>