How to style bootstrap container in Wordpress?

Question

I'm trying to target the following div:

<div class="col-md-5">
   <article>
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
      </p>
   </article>
</div>

But when I add this media query into the 'Additional CSS' section of WP, no changes apply at all.

@media only screen and (max-width: 600px) {
.col-md-5 {
margin-top: -530px !important;
}
}

The bootstrap file is loaded in the head in my theme so not sure what I'm doing wrong. Any help, greatly appreciated!

Answer 1

Ok, so a couple of things:

1. The code that you have there should work fine, unless as WebElaine suggested it's not actually there, or it's being overridden somewhere else in your styles.
2. I would strongly advise against the approach that you are taking to achieve the desired result.

The col-md-5 class is a core bootstrap class and serves a specific purpose. Applying a negative margin to it just to move one specific div on a specific page or page template would not be a good idea. This approach will actually often lead to all sorts of overriding styles that are hard to keep track of, so that might be the problem you're running into. If you have to target that div specifically I would recommend adding another class to it, or if for some reason you can't edit that markup, then try to qualify the rule with a class from a parent element that is unique to this specific page/layout.

Example:

.my-custom-layout .col-md-5{
    margin-top: -530px !important;
}

Otherwise you're basically saying that every single col-md-5 div gets a margin-top: -530px !important; rule applied to it on viewports below 600px, essentially adding that rule to the core of bootstrap.