Why isn't the padding-left property working for my lml-list-item?

Within my project, the padding-left of my item is determined by a previous stylesheet.

We observe that there is a padding-left set to 15px:

If I deselect the padding-left:

The requirement is to remove the padding-left, so I create a new css:

.lml-list-item  {
    background-color:#111111;
    padding-left:0px;  // Setting padding-left to 0px;

}

Upon checking the html in firefox, it appears that my css is not being utilized:

Why isn't my css working? Whether I position lml-list-item before or after the class, it still fails to work.

<a href="#" class="lml-list-item item-link item-content ">
    <li class="item-content lml-item-content">
        <div class="item-media black"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
             <div class="item-title">info</div>
         </div>
    </li>
 </a>
htmlcsscordova

Answer №1

Your use of 15px padding seems to have a wider impact than just affecting .lml-list-item. I suggest the following solution:

.list-block>ul>.item-content.lml-list-item {
   padding-left: 0;
}

If that doesn't work, you can try using an !important override as a last resort:

.lml-list-item {
   padding-left: 0 !important;
}

Answer №2

Upon reviewing the images provided, it is evident that the padding-left: 15px property is applied to .list-block .item-content, meaning any rules assigned to .lml-list-item will not take effect.

To address this issue, you can use 

.list-block .item-content.lml-list-item
or potentially .list-block .lml-list-item if placed after the current stylesheet in the document. Additionally, for selective rule changes, consider adding a <style> block within the <head> of the file itself instead of introducing another stylesheet, as inline styles will prevail over external stylesheets.

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

Show two spans, each underneath the other

I am looking to showcase two span elements, one below the other. Take a look at my HTML code snippet <img class="profile-photo margin-0" data-ng-if="!question.isOpen" ng-src="{{question.profilePicId ? que ...

htmlcssangularjsimagefrontend

Inspect/Adjust button status upon page initiation

In the realm of my custom MVC framework, a favourite button has been introduced. When this button is pressed, it triggers the appearance of a `successfully added to favourites` div. If clicked again, a `successfully removed from favourites` div appears. T ...

javascriptphpjqueryhtmltwitter-bootstrap

Increasing the height of a vertical division to reach its maximum vertical capacity

Looking for ways to make my html page more visually appealing. It is divided into 4 sections: Header, menu, content, and footer. The header is positioned at the top of the page, while the footer is located at the bottom. In between these sections are the m ...

htmlcss

Matching Javascript Variables to CSS Styles

I am currently developing a small HTML page and I am utilizing JavaScript to retrieve the screen dimensions. However, I am facing an issue with passing this variable to a CSS style as shown below. How can I achieve this successfully? Additionally, I have ...

javascripthtmlcssvariables

Writing text to multiple ID selectors in jQuery can be achieved by selecting each ID individually and using

Is it possible to add text to a div with two IDs using only one ID selector in jQuery? Here is how you can do: function fn(k) { $('#' + k).text('test') }; Take a look at the HTML: <div id="a b"><script>fn('b&apo ...

javascriptjqueryhtml

Creating a dynamic collection of N triangles in a container using CSS

In my current project, I am developing an Electron+Vue application that features a grid-styled map. Each cell on the map represents a room, and I want to indicate walls within these cells. Specifically, for directions North, South, East, and West, I can us ...

cssvue.js

Why is the HTML5 audio player only playing the first two songs in the array?

Why do only the first 2 songs play and then nothing happens? I want them to keep playing through the entire array of songs. Additionally, my rewind button is not working as expected - when clicked, it should go back to the previous song in the array and if ...

javascripthtmlaudio

Encountering an undefined variable error with Ruby on Rails 6 Bootstrap after restarting the server

I'm facing an issue in rails 6 where upon server restart, I encounter an Error: Undefined variable. Oddly enough, if I comment out the SCSS variables in my files, refresh the page, then un-comment them and refresh again, everything works as expected a ...

cssruby-on-railsrubybootstrap-4

Adjusting the column width of Angular Material's mat-table using column configuration

Looking at the column configuration I have set up for my Angular Material mat-table, it consists of the following properties: export interface TableColumn { name: string; dataKey: string; isSortable?: boolean; width?: string; // column width } //. ...

htmlcssangularangular-materialangular-material-table

In JavaScript, the gallery feature with Lightbox effect creates a unique touch as only half of the screen fades to black in

Hello everyone, I'm a complete beginner when it comes to programming so please be gentle with me on my first question :) I'm trying to put together a simple website with a lightbox gallery, and you can check out what I have so far here. The prob ...

javascriptjqueryhtmlcss

Update the text content in the specific span element when the class attribute matches the selected option in the

How can I dynamically update text inside a span based on matching classes and attributes without hardcoding them all? An ideal solution would involve a JavaScript function that searches for matches between span classes and select field options, updating t ...

javascriptjqueryhtmldrop-down-menu

Change the focus to the following "li" item while ignoring any nested elements

I am working with a menu structure as shown below. $('html').removeClass('no-js'); // Add plus mark to li that have a sub menu $('li:has("ul") > a').append('<span class="plusMark">+</span>'); Mouse ...

javascriptjqueryhtmlcss

Border will appear around the image once the corresponding radio button is selected

I am currently attempting to create a border or glowing effect around an image when the corresponding radio button is selected in my Angular program. Despite trying to modify certain properties of the image, I am facing difficulty as no changes are being a ...

htmlcssreactjsangular

After refreshing, a blank page appears when using the HTML POST method

After conducting a test using an HTML form with the POST method, I encountered an unexpected outcome. The setup involved two HTML pages hosted on an Apache server (with PHP already installed): post.html and target.html. Below are the code snippets for thes ...

phphtml

What is the best way to align an InputAdornment IconButton with an OutlinedInput in Material-UI?

Struggling to replicate a text input from a mockup using Material-UI components. Initially tried rendering a button next to the input, but it didn't match. Moving on to InputAdornments, getting closer but can't get the button flush with the input ...

javascriptcssreactjsuser-interfacematerial-ui

Having trouble with Gulp JS and CSS minification where existing minified files cannot be replaced

I've hit a roadblock in trying to resolve my search and google issue. My current challenge involves Gulp and cssmin. I can't seem to pinpoint the cause of an error. My aim is to have both the original CSS files and their minified versions in the ...

javascriptcssmodel-view-controllergulpminify

Column-count can result in the flex div dividing the element into two parts

Whenever I utilize column-count with nested divs that have display: flex set, I encounter a problem where elements are cut in half. The suggestion from this answer is to use display: inline-block to prevent this issue. However, when I implement that soluti ...

htmlcssflexboxvuetify.jscolumn-count

Issues with rendering images in the browser due to CSS inline-block layout are causing

I have encountered an issue with two divs that are set to 50% width and displayed inline-block. Each div contains an image. I expected both divs to stay on the same line, but sometimes the browser breaks the layout. Here is the HTML code snippet: <div ...

htmlcsslayoutbrowserresponsive-design

Tips on activating the overlay solely on the image without affecting the entire column

Currently, I am working on a project locally and do not plan to release it. However, I am facing an issue with making the overlay only appear on the image rather than covering the entire column. I came across some pre-built code on the w3 schools website ...

htmlcssbootstrap-5

`The function `setTimeout` throws an error when passed as a string.`

Here are two pieces of code that may look identical, but one works properly: function hideElement(obj) {setTimeout(function() {obj.style.display = "none";}, 20);} On the other hand, the second one results in error: obj is not defined: function hideEleme ...

javascripthtmlcss