CODEWITHSUNDEEP
csstwitter-bootstrap
DesignGal
DesignGal

Reputation: 17

Bootstrap CSS - column class error

My page has a static bg image and the text scrolls on a layer "on top" of it. On medium and large devices, I'd like the text to display to the right side of its row to allow for the bg image to be seen - so I added left padding for larger devices. On smaller devices, the text can span all the way across.

I've set the code for both large and small (code for the small devices works if there are no other col classes). When I add a class for larger devices, it's ignored.

I cannot figure out why the following CSS code won't work.

CSS:

.homeBGimg {
    padding: 100px 0 100px;
    color: #fff;
    position: relative;
    background-image: url(../images/image_1900x1200.jpg);
}
.homeBGimg .even {
     background-image: url(../images/image_1900x1200.jpg); 
} 
.homeBGimg h1 { 
    color: #000; 
}

/* CODE THAT'S DRIVING ME INSANE */

.homeBGimg .col-sm-12 {padding-left: 30px;}
.homeBGimg .col-md-12 {padding-left: 600px;}

/* END OF INSANITY */

HTML:

<section class="homeBGimg">
    <div class="container">    
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <h1>Are you prepared for retirement?</h1> 
                <h2>Find out at a complimentary retirement workshop near you.</h2>
                <p>
                    <a href="what-you-should-know.html#videos" 
                    class="btn btn-outline-inverse btn-lg"  
                    data-toggle="tooltip" data-placement="top" 
                    title="Learn More">
                        Learn More
                    </a>
                </p>
            </div>
        </div>
    </div>
</section>

Upvotes: 1

Views: 1011

Answers (2)

MattD
MattD

Reputation: 4420

It's because you're trying to set CSS styling using two different classes for a div that has both of them. You can't do that. Well, you can, but you'll run into the problem you're having.

When working with HTML and CSS, you need to remember that they are read from top to bottom, as you would any document. As such when the browser reads the CSS file, it reads the "rules" in the order they're given, and applies them in that order.

So first you tell it to do this:

.homeBGimg .col-sm-12 {padding-left: 30px;}

Then you tell it to do this:

.homeBGimg .col-md-12 {padding-left: 600px;}

For an element that looks like this:

<div class="col-sm-12 col-md-12">

Another thing to remember: even though the Bootstrap class isn't techincally applied for that specific width, the class still remains, and any CSS tied to it will still be applied.

View this FIDDLE to see what's going on. In it, I've applied a border to the item you're targeting with each of the CSS statements you're having issues with. The first one applies a blue border, the second applies an orange one. Notice how only the orange one applies at any viewport width? That's because the rule that applies the orange border comes after the one that applies the blue border, and applies to the same element based on how you've done your DOM targeting, therefore the furst rule is overridden.

To do what you want, you'll need to either look into using what are called media queries in CSS, or for a solution using jQuery.

Check out this other FIDDLE for an example of how to do this with media queries, and for better targeting.

HTML:

<section class="homeBGimg">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12 foo">
                 <h1>Are you prepared for retirement?</h1> 
                 <h2>Find out at a complimentary retirement workshop near you.</h2>

                <p> <a href="what-you-should-know.html#videos" class="btn btn-outline-inverse btn-lg" data-toggle="tooltip" data-placement="top" title="Learn More">Learn More</a>

                </p>
            </div>
        </div>
    </div>
</section>

CSS:

.homeBGimg {
    padding: 100px 0 100px;
    color: #fff;
    position: relative;
    background-image: url(http://placehold.it/1920x1200);
}
.homeBGimg .even {
    background-image: url(http://placehold.it/1920x1200);
}
.homeBGimg h1 {
    color: #000;
}
@media screen and (max-width: 992px) {
    .homeBGimg .row div {
        padding-left: 600px;
        border: 1px solid orange;
    }
}
@media screen and (max-width: 768px) {
    .homeBGimg .row div {
        padding-left: 30px;
        border: 1px solid blue;
    }
}

I hope this gets you started on the right path.

Upvotes: 1

Devin
Devin

Reputation: 7720

You have to replace this line

 <div class="col-sm-12 col-md-12">

with this:

<div class="col-sm-12 col-md-12 col-lg-6 col-lg-offset-6">

You don't need that padding at all. Furthermore, it won't work (as you already have noticed. Instead, you need to use the Bootstrap grid. In your specific case, I'm offsetting columns on large views and displaying full width for small screens. Just for reference, I've made a Bootply for you to see

Be sure to check this section of Bootstrap docs which teaches you how to deal with grids and offsetting columns.

Upvotes: 1

Related Questions