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!

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!

• customization
• css

• Did you check the source to see if the CSS change is included anywhere on the page? Do you have some type of caching that might be preventing you from seeing the change? – WebElaine Commented Jan 22, 2020 at 20:47
• Wow why so big a negative top margin? I feel something else needs to be fixed here if you're doing that. It's not wrong, just endemic of another issue. And remember the media query says you'll only see the change when your screen is 600px wide or narrower. I reckon rather than override bootstrap grid class add a custom class to that div. – Nathaniel Flick Commented Jan 23, 2020 at 21:38
• Thank you Nathaniel! I've been trying to override the bootstrap grid class but I haven't been able to access the markup code. When I go to Appearance > Theme editor, I only see the following files: style.css functions.php header.php footer.php Any idea where would I go edit the html? (I'm obviously a newbie) – Flaccus Commented Jan 25, 2020 at 10:45

1 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.