Strange CSS Behavior in Wordpress Child Themes

Currently, I am in the process of customizing a WordPress theme.

In my situation, a div is being generated through a widget, with multiple classes:

<div class="col-lg-3 focus-box item-1">...</div>

The parent theme and bootstrap stylesheet already have properties applied to the focus-box and col-lg-3 classes respectively.

I then added the following to my child-theme stylesheet (which has been working fine for other things):

.item-1 { background-color: orange; }

However, this adjustment did not take effect. After trying the following in my child-theme CSS:

.col-lg-3 (or focus-box) { background-color: orange; }
.item-1 { background-color: orange; }

This approach worked... I'm quite perplexed by what's going on here.

Considering that my child-theme stylesheet is loaded last, it should override all others, right?

If anyone has any insights, I would greatly appreciate hearing them :-)

Thank you in advance for your assistance.

Sincerely, Sommy

htmlcsswordpresstwitter-bootstrap

Answer №1

Appreciate your responses.

Initially, I attempted to utilize `!important` without success; it yielded the same outcome when using a stronger selector.

I am familiar with how to inspect code in my browser, which is why I can confirm that my child-theme CSS loads last after checking it myself.

What's truly perplexing, from my perspective, is that the results vary depending on whether or not I include `col-lg-3` in my stylesheet.

I encounter similar issues with other HTML elements within my code.

To summarize:

  • The Child-Theme CSS loads after the parent one
  • This was verified using the browser development tool
  • I've also observed that the placement of my CSS properties impacts the result; sometimes placing them at the end of my child-theme css makes them work as intended:

{

/* IF I PLACE THE SELECTOR .focus-box .service-icon here It Doesn't Work */
/* OBSERVE THE LAST ELEMENT BELOW */

... (omitted for brevity)

}

Focus Box HTML Code :

    <div class="col-lg-3 col-sm-3 focus-box item-dashboard" data-scrollreveal="enter left after 0.15s over 1s">

... (omitted for brevity)

The query remains: Why doesn't my child-theme CSS effectively override the parent one? Why does the placement of my CSS element influence the result despite not appearing to be property overriding?

Thank you once again for your assistance.

Answer №2

After revisiting the order of my style sheet loading and other factors, I was able to successfully resolve this problem.

Appreciate all the assistance!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am looking to create an extension that can automatically paste text from a variety of lists, but unfortunately, I am struggling to get it up and running correctly

I'm having trouble pasting text into text boxes or documents. I've tried various methods, but nothing seems to work. Am I missing something? Is there a solution or could I get some assistance? manifest.json { "manifest_version": 3, ...

javascripthtml

Struggling to eliminate the padding beneath the menu items in Bootstrap?

I'm having trouble adjusting the padding inside my menu. I want to make it less chunky and large, but so far I've only been successful in removing the top padding. The bottom padding just won't budge. Here's the code that helped fix th ...

jqueryhtmltwitter-bootstrapcss

I am looking to display the data in a table format within CodeIgniter

Currently, I am working on a project where I have a table with course IDs and under each course ID, student names are listed. You can refer to the image below: https://i.sstatic.net/YNuhh.png I have managed to fetch the data, but I am struggling to displ ...

phphtmlcodeigniterbootstrap-4

Adjusting the layout based on the WordPress page template in NuxtJs

I need to change the layout based on the WordPress page template using data fetched from a REST API. API Data { "id": 47, "template": "test.php", // require vue template based on this } export default { validate ({ params }) { return !i ...

wordpressvue.jsvuexnuxt.js

Achieving a Customized Header and Footer in Bootstrap 4 Alongside Immersive Google Maps Display with Full Screen Height

I'm facing some challenges while developing a webpage with Bootstrap 4.1. I am working on incorporating a header, Google map that fills the entire content area, and a footer below the map. ------------------------------------------------------------- ...

htmlcssbootstrap-4

What advantages does the use of $(e).attr(name,value) offer compared to using e.setAttribute(name,value)?

Scenario: The variable "e" represents an element of type "HtmlElement" and not a "css selector" I am referring to any attribute, not just the standard allowed ones like "atom-type" or "data-atom-type". Regardless of the attribute name, will it function wi ...

javascriptjqueryhtmlcss

core.js:15723 ERROR TypeError: Unable to access the 'OBJECT' property because it is undefined

Whenever I attempt to run this function, I encounter an issue. My goal is to retrieve the latitude and longitude of an address from Google's API. This error message pops up: core.js:15723 ERROR TypeError: Cannot read property 'geometry' of ...

htmljsonangulartypescript

How to center a progress bar in a div using Bootstrap

Looking to incorporate a Bootstrap progress bar as a loading indicator, aiming for the progress bar to be centered within the DIV at a specific width. However, aligning the progress bar in the center seems to be an issue. When utilizing: <div class="t ...

htmlcsstwitter-bootstrap

Ways to execute a JavaScript function upon a button click instead of during the page load completion

I searched on Google but couldn't find the answer, so I'm asking here for help. In the attached screenshot located at the end, when the user clicks on the download button, some backend actions are performed such as file transfer. Once the proces ...

javascriptc#jqueryhtml

Utilizing offsets/push in the correct manner

I have been developing a Bootstrap website and I wanted to get some feedback on my current code structure. The design is coming along nicely, but I am unsure if this aligns with best practices? <div class="container-fluid"> <div class="row"> ...

htmlcsstwitter-bootstrap

Replacing a <p> element using solely CSS: the ultimate guide (other techniques are ineffective)

After reviewing this particular question, I found that the suggested solution did not yield the results I was hoping for. Here is a visual representation of the issue: https://i.sstatic.net/Nj5V0.png My goal is to substitute the text "Select subscription ...

css

The function `splitPinCodes.split(',')` is causing a malfunction

I am encountering an issue with validating the input data. The input text area should contain 6-digit zip codes separated by commas. I have implemented the ng-change="convertToArray()" method in Angular for the input text area. If I enter more than 6 digi ...

javascripthtmlangularjs

Is it possible to adjust the height of ion.RangeSlider?

Currently, I am using the ion.RangeSlider in my project, which can be accessed here: Although it functions well, I am interested to know if there is a way to increase the size/height of the slider. I have attempted adjusting the height and padding but hav ...

jqueryhtmlcsssliderrange

Error: Attempting to access a string offset on a string is not possible in the specified location within the public...elementorcorepage-assetsdata-managersase.php file at line

The issue is manifesting in the base.php file of the Elementor plugin, specifically at line 242. It appears to be connected to an attempt to access an offset of a string that is being treated as an array, when in reality, the value is simply a string. Her ...

phpmysqlwordpresslocalelementor

Retrieve a specific value in HTML <a> tag using JavaScript-Ajax in Django

I am currently working with Python 3 and Django. Within my HTML code, I have the following: {% for category in categories() %} <li class="c-menu__item fs-xsmall"> <a href="#" id="next-category"> {{ category}} & ...

javascriptpythonhtmlajaxdjango

Implementing transparency to clip-path using HTML and CSS

How can I apply opacity to the clip-path/clip area, similar to the image shown below? Please find my code snippet for reference: .item--clip .demo { width: 200px; height: 250px; } .item--clip .has-mask { position: absolute; clip: rect(10px, 19 ...

htmlcssvue.js

Reduce the height of the navigation bar

I used the header example from Bootstrap's documents here: https://getbootstrap.com/docs/5.3/examples/headers/# The code I have is: <div class="container fixed-top bg-white"> <header class="d-flex flex-wrap justify-conte ...

cssbootstrap-5

Continuous Load More: Loads content infinitely until a page is fully loaded

I am currently experimenting with implementing infinite ajax scroll within a Bootstrap modal. Below is the initial appearance of the modal, before any data is loaded: <div class="modal fade" id="modal" tabindex="-1"> <div class="modal-dialog" ...

javascriptjqueryajaxtwitter-bootstrapjquery-ias

Is it necessary to have authorization on a community website?

I'm currently revamping the website structure for a thriving open-source community. In order to combat potential spamming issues arising from a large number of members, I am considering offering certain options or features exclusively to authenticated ...

djangohtmlgithuboauthvs-web-site-project

Automatically populating email and password fields on page reload in JSX

When I'm working on the autocomplete feature for the email and password fields on the login page, it seems to automatically populate the fields every time the page reloads. Currently, I have only finished the JSX part of the login page and haven&apos ...

htmlreactjsmaterial-uijsx