Tips for customizing css for image tags

Here is the CSS code I used for images:

img {
    border: none;
    max-width: 100%;
    height: auto !important
}

To override specific image styles, I added this at the bottom:

.locals-list>img {
    height: 35px;
}

Below is the HTML code I am working with:

<div class="eas-footer">
    <div class="wrap cfx">
        <h6 class="know-your-city" style="text-align: center;">Supported by</h6>
        <div class="locals-list">
           <a href="http://www.indonesia.travel" target="_blank"><img src="http://cdn.goasean.com/assets/content/sponsors/_normal/logo_wonderful_indonesia_2014.png" alt="{title}" data-pin-nopin="true"></a>                   
        </div>
    </div>
</div>

However, I have encountered an issue where the new height changes are not being applied, and the height remains as auto !important. Can someone please assist? Thank you!

htmlcss

Answer №1

By adding another height with the use of !important property (height: 35px !important;) at the end of the CSS code, it will take precedence over the previous height settings.

An adjustment was made from .locals-list>img to .locals-list img. Refer to the modified code snippet below.

img {
  border: none;
  max-width: 100%;
  height: auto !important;
  border: 1px solid green;
}
.locals-list img {
  height: 85px !important;
}
<div class="eas-footer">
  <div class="wrap cfx">
    <h6 class="know-your-city" style="text-align: center;">Supported by</h6>
    <div class="locals-list">
      <a href="http://www.indonesia.travel" target="_blank">
        <img src="http://cdn.goasean.com/assets/content/sponsors/_normal/logo_wonderful_indonesia_2014.png" alt="{title}" data-pin-nopin="true">
      </a>


    </div>
  </div>
</div>

Answer №2

Include the following attribute !mandatory

.inventory-items>img {
    width: 50px !mandatory;
}

Answer №3

The !important declaration overrides other property values in CSS. You can either eliminate !important from height:auto (recommended) or include it in height: 35px;.

It is not advisable to use !important in CSS frequently. It should be reserved for specific instances like:

.always-hide-this-no-matter-what {
  display: none !important;
}

For more information on CSS specificity, check out this informative article.

Answer №4

Due to the use of height:auto with !important, you will need to also use !important to override it, as shown below:

.elements-container>img {
    height: 50px !important;
}

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

Inquiring about paint-order support for HTML elements using @supports

For those looking to create boldly stroked texts in Firefox and Safari, using paint-order and text-stroke (or the prefixed -webkit-text-stroke) is the way to go. Here's an example: h1 { -webkit-text-stroke: 5px red; paint-order: stroke fil ...

css

The z-index of the React Apex Chart toolbar menu icon is too high. Is there a way to decrease it?

Is there a way to adjust the z-index value of the icons within React Apexchart's toolbar menu? Even when I position my element at a higher level, they remain on top of it. ...

cssreactjsapexcharts

Troubleshooting the issue with reactdom.render() functionality in CodeSandbox

Having issues with ReactDom in CodeSandbox for React. The HTML file includes: <body> <div id="root"></div> </body> <script src="scr/index.js"> The JavaScript file (named index) includes: ReactDOM.rende ...

javascripthtmlreactjs

Is it possible for a gradient between accessible colors to also be accessible?

Ensuring accessibility on websites is a top priority for me, with our goal being at least AA standard. We utilize tools like and to test the contrast between background colors and black or white text. For example, let's consider white (#fff) text a ...

csswebcolorsaccessibility

The output from the Python and SQLite combination is accurate, however the HTML rendering is not displaying the data correctly

Retrieving data from a database using different methods can yield varied results. When the method is set to 'get', it returns all information, but when it's 'post', it only returns the searched item. Although the post method return ...

htmlsqliteflaskjinja2

Issue with menu display on Internet Explorer

Having some trouble with IE. My menu displays fine in Firefox and Chrome, but IE is causing issues... It seems that IE isn't rendering the <li> tag properly, so my dropdown menu isn't functioning in IE. Can anyone assist me? Here's t ...

phphtmlcss

Stop the caching of HTML pages

After adding the lines below to prevent caching and display the content within an iframe, there seems to be no effect: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-Equiv="Cache-Control" Content="no-cache"&g ...

html

Create a stylish slide-in menu using CSS, triggered by an onclick event. No JavaScript required!

I implemented a hamburger menu that slides in when clicked. However, I'm facing an issue where the slide-in menu disappears after a second. How can I make sure the menu stays visible? #navigationWrap { position: fixed; top: 0; ...

htmlcss

Error: You can't call .text as a function in jQuery

While trying to retrieve the text from my td, I encountered the following error: $tds[2].text is not a function. The output of console.log('td',$tds[2]) shows: https://i.stack.imgur.com/OUngP.png $(document).ready(function() { $trs = $(&ap ...

javascriptjqueryhtml

Struggling to align the image elements accurately

I am aiming to create a layout similar to the image displayed below.https://i.sstatic.net/Q5n8J.png To be more specific, my goal is to scatter smiley faces randomly within a 500px area while also having a border on the right side of the area. However, wi ...

javascripthtmlcss

Selenium struggles to update dropdown menu choice

Here is the HTML code snippet in isolation: <span style="position: relative; width: 100%; display: inline-block;"> <select id="0ac88542d16d6200fb983d094f655c76_select" class="form-control"> <option value="display_value">Numbe ...

pythonhtmlseleniumselenium-webdriverdrop-down-menu

"What is the process for creating a single line border around a pandas DataFrame using df.to_html method

After exporting a pandas dataframe as an HTML table to Outlook, I noticed that the double cell borders are not aesthetically pleasing. I am seeking assistance in changing them to a single line border. Please refer to the attached screenshot and code snip ...

pythonhtmlpython-3.xpandas

In need of assistance with adding a divider within a box using HTML/CSS

As a beginner, I may have messy code but I'm working on creating a job search page with a bar displaying the results like this: I've almost got it, except I can't figure out how to add that divider between PREV, 1 to 100, and NEXT. My curre ...

htmlcss

Mobile display issue with CSS columns when using the :checked pseudo class

I have embarked on the creation of a portfolio website that relies solely on CSS3 to present a grid and filter out thumbnail images. If you're curious about what I've accomplished so far, feel free to take a look here. To achieve the filtering ...

cssgridmobile-safaripseudo-class

Having trouble with the functionality of JQuery drop feature?

As I delve into implementing drag and drop functionality with JQuery, I encounter a peculiar issue. I have set up 3 'draggable' divs and corresponding 3 'droppable' divs. The intended behavior is for each draggable element to be accepte ...

javascriptjqueryhtmlcssjquery-ui

How to create a stylish border line to separate rows using CSS

Having some trouble with HTML code... <table class="table table-condensed order-statistics"> <tr class="order-statistics-row"> <div class="row"> <div class="col-lg-4"> Order ID: </div> <div ...

htmlcss

Cookies store their values within the document.cookie framework

My cookie contains the following data: emailID=a1%40a.comSEPmaths=0SEPphysics=0SEPchemistry=0SEPbotany=0SEPzoology=0SEPta mil=0SEPenglish=0SEPpolity=0SEPgk=0SEPhistory=0 However, when I use document.cookie.split('; '), it returns the encoded ve ...

javascriptphphtmlcookies

Adjusting the overflow of a parent div based on the position of the div within it by scrolling

I'm trying to create a page with 3 different sections: <div class="container" id="main-container"> <div class="section" id="profile"> Hello World </div> <div class="section" id="projects"> Hello World 2 ...

javascriptjqueryhtmlcss

Ways to Identify When the Back Button is Clicked

Currently, I am developing an HTML website that contains 4 divs on the index.html page. Initially, when clicking on a div, it would expand while the other sections reduced in width. However, the client requested that the URL should change when clicking o ...

javascriptphpjqueryhtmlangularjs

Fixing the error: Severity notice, there is an undefined variable called 'table'

My controller logic is as follows: public function index() { if ($this->session->userdata ( 'logged_in' )) { $condition = array( 'qes_status'=>'Y' ); $data = array(); $ ...

phphtmlcodeigniter