CODEWITHSUNDEEP
htmlcsswordpress
ahh_wang
ahh_wang

Reputation: 59

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

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.

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

.container {
  margin-left: 0;
}

Upvotes: 3

Views: 20497

Answers (7)

Muhammad Nasir
Muhammad Nasir

Reputation: 2204

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{
}

Upvotes: 0

Lalithanand Barla
Lalithanand Barla

Reputation: 63

  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.

Upvotes: 0

Blezx
Blezx

Reputation: 614

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.

Upvotes: 1

Ahs N
Ahs N

Reputation: 8366

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;">

Upvotes: 0

rnevius
rnevius

Reputation: 27092

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.

Upvotes: 13

APAD1
APAD1

Reputation: 13666

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.

Upvotes: 0

taxicala
taxicala

Reputation: 21759

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;
}

Upvotes: 2

Related Questions