How do I target a div on a specific WordPress page using HTML/CSS?

3 Views

I’m trying to remove the margin-left on http://insightcxo.com/epicwin/

The problem is when I target the class .container, it shifts the whole website over – I only want to target the div on the specific page.

Read More

This is the code I’m using that makes the page work but shifts the whole website over as well: 

.container {
  margin-left: 0;
}
Post Views: 3

Related posts

7 comments

  1. Most WordPress themes (including yours) include the page ID as a body class name. In this case, the <body> tag looks like the following:

    <body class="page page-id-731 page-template-default page-shadow responsive-fluid ">

    This means that you can target this page via:

    .page-id-731 .container {
  margin-left: 0;
}

    More about WordPress’s body_class() function can be found in the Codex.

  2. As per the page you are linking, it seems you are using an page-id as a class in your body, so this might work:

    .page-id-731 .container {
    margin-left: 0;
}

  3. I am not sure if I understand completely, but I think what you need to do is add an id to the div you want to target.

    Here is a JSFiddle of what I mean:

    https://jsfiddle.net/dT9Yk/25/

    HTML:

    <div class="div1"></div><br>
<div class="div1" id="marginleft"></div><br>
<div class="div1"></div><br>

    CSS:

    .div1 {
width: 100%;
height: 50px;
background: red;
}

#marginleft{
margin-left:10%;
}

    As you can see they all have the same class name but the middle one has an additional id tag.

  4. Add a class to the body on that page only and then use specificity to target the container on only that page. For instance, add body class epicwin on that page and then use

    .epicwin .container {
    margin-left:0;
}

    to target it.

  5. Adding margin-left: 0px; to your CSS file is conflicting with the default .container class of bootstrap.
    To fix your issue apply the class directly inline, it will solve your issue, like so:

    <div class="container" style="margin-left: 0px;">

    1. You can create something like this in the stylesheet you are using:

      .Container_Div { padding: 0px 0px 0px 0px;}

    2. Add this to your HTML:

      div class="Container_Div"

    Try this and let me know.

  7. You can target a div with class/id .you can target directly or with reference of parents div class/id as follow.

    <div class="parent">
    <div class="child"></div>
</div>

    direct target

    .child{}

    with reference to parent div .It will only apply style to class/id that exist in parent with specific id/class

    .parent .class{
}

Comments are closed.