0

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!

3
  • 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
    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. 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
    Jan 25, 2020 at 10:45

1 Answer 1

0

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.

4
  • Thank you! I've been trying to edit the markup but I can't seem to find the right html/php file. 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?
    – Flaccus
    Jan 25, 2020 at 10:42
  • It really depends on the theme you're using. There's an infinite number of ways a theme can load that markup into the output for that page. It sounds like you might be using a child theme where the template files would be in the parent theme. If so, don't edit the parent theme directly, instead copy the template from parent to child then edit the child copy. What is in the comment at the top of the style.css file?
    – KFish
    Jan 26, 2020 at 3:00
  • Hey KFish, thanks for the follow up! I'm using the CustomStrap theme and Live Canvas. Here's the comment at the top of the style.css file: /* Theme Name: CustomStrap Theme URI: dopewp.com/customstrap Description: A child theme for UnderStrap, just bringing come cool options in the Customizer! Author: DopeWp Author URI: dopewp.com Template: understrap Version: 1.0b3 Text Domain: customstrap License: GPL-2.0 License URI: opensource.org/licenses/gpl-license.php */
    – Flaccus
    Jan 26, 2020 at 13:36
  • Ok, so as the comments indicate that is actually a child theme of the understrap theme. So you should also have the understrap theme installed, and that should be where your template file is. Based on the markup it looks like it's probably an archive page template. You'll need to use an FTP or SSH connection to edit it rather than the theme editor, as this will involve copying the file from the parent theme to the child theme, but you should be able to at least find the template in theme editor by switching to the understrap theme in the dropdown above the file list.
    – KFish
    Jan 26, 2020 at 17:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.