Custom CSS code not working – altitude Pro

[dpalme]

In the altitude pro, the style.css on line 118 has the following:

body {
	background-color: #fff;
	color: #000;
	font-family: "Ek Mukta", sans-serif;
	font-size: 20px;
	font-weight: 200;
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

I have added the following to the custom CSS but its still being ignored:

.page-id-134 body {
	line-height: 1;
}

Any idea why its being ignored?

[Victor Font]

You have the HTML tag and class in reverse order.

body is a HTML tag. .page-id-134 is a class assigned to the body tag. The correct order is body.page-id-134

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[dpalme]

Thanks Victor, that did the trick. I tried to use the same logic with the img tag but that doesn't appear to work:

img.page-id-134 {
	height: 55px!important;
}

Suggestions?

[Victor Font]

No, it won't because .page-id-134 is a class of the body tag, not the img tag. Remember, the first C in CSS stands for cascading. Think of cascading like a waterfall. The body tag is located at the top of the page. All the other visual elements come after it. You have to use elements and classes in the order they cascade down the page.

To qualify the img tag for a specific page, you have to use .page-id-134 img. Why? .page-id-134 is part of the body tag and the img tag is subordinate to the body tag. You have to include the space between the qualifying class (.page-id-134) and img tag because .page-id-134 is not directly associated with the img tag.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[dpalme]

How would I structure it so it applies not just to the page but a specific img element?

I'm assuming I would need to add a class to the img element correct?

[dpalme]

ok I got it...

#btn-apple img {
	height: 55px!important;
}

[Author]

Posts