The CSS media query is failing to function as expected

My CSS code is as follows:

@media screen and (max-width :300px) {
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;        
    text-decoration: none;
  }
}

This means that I intend to modify the CSS when the screen size goes below 300px.

I have also included this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

However

when I reduce the browser size to less than 300px, the CSS changes are not reflected. I confirmed this by inspecting with Firebug and verifying that my CSS was not being applied.

Edit

Initially, this was my default css:

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}

Despite using media queries, in Firebug I always see the default CSS being applied, not the one within the media query.

htmlasp.netcss

Answer №1

Your media query css needs to have different properties from your default css in order to have an effect. If both have the same values, nothing will change. You should specify only the values that need to be adjusted in the media query, such as removing padding. Remember that the media query should be written after the default css to ensure it takes precedence. The media query rules will be applied on top of the default, not in place of it.

Check out this example based on your code to see how it works:

jsfiddle Demo

Html

<div class="ui-tabs">
    <nav class="ui-tabs-nav">
        <a href="#" class="ui-tabs-anchor">Link 1</a>
    </nav>
</div>

Css

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
    background: red;
    display:block;
}

@media screen and (max-width :300px) {
    .ui-tabs .ui-tabs-nav .ui-tabs-anchor    {
        padding: 0;
    }
}

Note In some cases, you may need to use the '!important' flag to override a property set in the default css using its id.

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

Apply CSS styles from a text area using v-html

I am currently working on developing a unique WYSIWYG application where users have the ability to write CSS in a textarea field and view its direct impact on the HTML content displayed on the page. As I was experimenting with different approaches, I attemp ...

javascriptcssvue.jswysiwyg

Guide on leveraging event delegation to trigger a function depending on the id of the clicked element

Although I have experience with event delegation, I am currently facing a challenge in setting up a single event listener that can execute one of three functions based on the ID of the element clicked. Here is the existing code without event delegation: ...

javascripthtml

In jQuery, a dropdown selection can be filled with multiple textboxes sharing the same class

I'm experimenting with the idea of using multiple textboxes with the same class filled with different dropdown options that also have the same class. However, I am encountering some issues. When I click on a dropdown option, it changes the value in a ...

javascriptjqueryhtmlselect

Is the `visibility: hidden` property not functioning as expected?

I am trying to conceal the script for the photoset until it is fully loaded, but unfortunately the code below does not seem to be effective: JavaScript $('.photoset-grid').photosetGrid({ rel: $('.photoset-grid').attr("data-id"), gutte ...

javascriptjqueryhtmlcss

Navigating through webforms by mapping routes with url extensions

I've inherited an outdated application where I'm tasked with creating a web form that can read query strings and return specific assets, usually images. My current route setup looks like this: routes.MapPageRoute("Assets", "Assets/ ...

asp.netwebforms

Conceal any zero values from an empty numerical input

Currently, I have a form that retrieves data from a database and includes a number input type field. When the field is empty, it defaults to displaying "0." However, I would like to hide the "0" and only show the value if it is different from 0. Despite a ...

javascripthtml

Exploring options for viewing content on phones and tablets in both portrait and landscape

Recently, I stumbled upon an interesting article discussing @media queries for standard devices. You can check it out here. The article showcases different @media queries applicable to various devices. However, I found myself a bit puzzled. It includes ex ...

cssresponsive-designmedia-queries

Linked Dropdownlists Connected to a Single Dropdownlist

I am struggling to find the best way to phrase my question, but I need some help. I want to connect three dropdown lists together in a specific way. Dropdown list 2 and 3 should be disabled so the user cannot interact with them, while dropdown list 1 remai ...

htmlasp.netwebformssqldatasource

What steps do I need to take in order to show the present value using a range input?

Hey there! I'm working on a code in HTML that includes an input of type range. Here's what it looks like: This is my input: <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> Unfortunately, I'm unable to s ...

javascriptphphtml

Tips on creating a button that, upon clicking, triggers the download of an Excel file using PHPSpreadsheet

I am trying to figure out how to create a button that, when clicked, will download an Excel file named b1b5.xls with some specified values added. Here is the code I have so far: <html> <head> </head> <body> <center> < ...

javascriptphphtml

A button featuring an extensive label that utilizes text-overflow ellipsis is initially set with a max-width of 700px. However, it should dynamically shrink when the viewport size decreases

My Request I need a button that can accommodate both long and short labels, with the text getting cut off at 700px using ellipses. The button should adjust to the available space when the viewport is smaller than 700px. The length of the label can vary gr ...

cssmaterial-ui

Construct a table featuring nested rows for every parent entry

Table 1 orderid customerName totalCost ---------------------------------- 1 Jonh £200.00 2 Ringo £50 Table 2 orderlineid orderid productName productPrice Quantity ----------------------------------------------- ...

javascriptjqueryhtml

Processing log files containing JSON data across multiple lines using Logstash

Currently in the process of parsing a multi-line json log containing exceptions and stacktraces using logstash. The logs are generated from an asp.net core application with NLog in json format: { "timestamp": "2021-01-31T17:18:30.1781670+03: ...

asp.netjsonlogstashelk

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...

javascriptcssreactjsecmascript-6

Issue with Bootstrap spinner not functioning properly within a table featuring a sticky header

In the Razor Page app I'm working on, the index page features a table with a sticky header and a spinner in one of the columns. However, when the table is scrolled vertically, the text in the column goes under the sticky header, while the spinner rema ...

htmlbootstrap-5

Position a Bootstrap 3 division within a central division for ultimate centering

I have written a code snippet that looks like this- html, body, .container-table { height: calc(100% - 50px); } /*Centering a div*/ .container-table { display: table; } .vertical-center-row { display: table-cell; vertical-align: middle; } < ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Creating Dynamic Divs in ASP.NET

Attempting to dynamically create a Div by clicking a button has been a challenge for me. I found a helpful link here: After referring to the link, I created the following code on the server side (.cs page): public static int i = 0; protected void Bu ...

c#javascriptasp.net

"Identifying elements in CSS that do not have any adjacent text elements

I need help identifying a CSS selector that can differentiate between the <var> tags in these two distinct situations: <p><var>Foo</var></p> And <p>Some text <var>Foo</var> and more text</p> Specifi ...

csscss-selectors

jQuery Conditional String Manipulation

I have set up a system where users can input values and make selections from a drop-down menu, which then get integrated into JavaScript code to generate customized sentences based on their inputs. Once the user clicks submit, the sentence is formed. It&ap ...

jqueryhtmldrop-down-menujquery-chosen

Invoke a function using the output of a different function

There is a function whose name is stored in the value of another function, and I need to invoke this function using the other one. The function I need to call is popup() random() = 'popup()' if ($.cookie('optin-page')) { } I attemp ...

javascriptjqueryhtmlcss