Media queries do not impact inline styling

Need help with media queries!

Here's an example showcasing the issue:

<h1>Hello<span style="font-size:80px;">WORLD</span>

@media (max-width: 768px) {
    h1 {
        font-size: 180% !important;    
    }    
}

The 'Hello' part changes with the media query, but the span containing 'WORLD' remains the same size.

Is there a way to address this using only HTML and CSS?

Answer №1

When crafting your selector, ensure it follows this format:

h1 span{
    font-size: calc(80px *1.8) !important;/* or simply 144 */
}

Avoid using a straightforward 180% declaration as it may calculate the size relative to the font size prior to any inline styling adjustments (unless that was your intention).

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

Click to switch divs

I am struggling and in need of help. I have been trying to rotate divs on click using jQuery, which was successful until I had two sets of divs that needed to be rotated independently on the same page. When clicking on the arrows to rotate the content in t ...

Can you specify the doctype used for XHTML5, which is the XML representation of HTML5?

Which doctype is recommended for XML serialization of HTML5? If I keep the file extension as .html, can I still indicate to the browser that the content is XHTML5? ...

Firefox Misplacement: Erroneously Shifting Element Locations

I have recently completed designing and developing a new website, which you can visit here. However, I am currently facing an issue with the positioning of the "About Us" image when accessing the site on either a tablet or a mobile device. Strangely enou ...

What is the reason for the presence of "CTYPE" in my HTML upon refreshing the page?

As I am utilizing Harp and Bootstrap for my project, I am encountering a peculiar issue. Upon refreshing the page, I notice that the text ""CTYPE html>"" is inserted within the body tags. Can anyone shed light on why this is happening? ...

Implementing Node.js with browser cache and handling 304 responses

I am currently in the process of creating a single page application with a standard HTML layout as shown below: <html> <head> <title>...</title> <link rel="stylesheet" media="all" type="text/css" href="css/main.css"> ...

Using z-index to overlay a background image with transparency

I'm attempting to make a partially transparent div with text on top. My approach involves creating a parent tag with relative positioning. I have one child span with transparency set using the class .body-content-background and another child containi ...

How can I display just the time portion of a date in AngularJS?

Hey everyone, I need assistance with displaying only the time value in AngularJS. Check out my Plunker I have fetched the time value using ng-repeat, but I want to display only the time value on my portal. I have tried to display the time value lik ...

What is the proper method for utilizing the calc() function in conjunction with min-content?

My grid layout has a specific design that I'd like to simplify. The goal is for the .side element to initially adjust its size based on the content using min-content, but also allow users to expand it by adjusting the --size custom CSS property. I a ...

Express will be used to return empty values to an array

I am currently in the process of learning how to use express, so I am relatively new to it. I am facing an issue where I am trying to send data from a form I created to an array, but unfortunately, it is adding empty values to the array. The values are dis ...

Tips for Retrieving and Modifying Bounds in Google Maps to Add or Remove Markers from a List

I'm currently facing a challenge where I need to retrieve the Bounds and Change Bounds in order to add and remove Marker information on my Added List below my Google Map. Similarly, with the Zoom change, I need to make adjustments because I am utiliz ...

Using jQuery and JSON: selecting classes based on associated JSON strings

If you want to see the complete codepen, I will share it here: http://codepen.io/JTBennett/pen/NdLWJy Let me try to simplify the problem. I have a click event that selects from a JSON object based on one of its string values. Text from various strings is ...

Encountering blank space in the first table row after a page break when creating a PDF using dompdf

Encountered a strange bug while working with dompdf for PDF generation. The issue arises when a page break occurs within a table. Subsequent to the break, the first tr on the next page displays an odd empty space on the left side (as depicted in the image ...

Develop a Modal Form using Bootstrap (HTML)

I followed a tutorial on creating a modal form with Bootstrap, you can find it here: http://www.youtube.com/watch?v=HCEbp07hfLw I replicated the steps shown in the video, but when I try to open the page in my browser, nothing appears. I have added the Bo ...

Utilize AngularJS to enable a CSS Class through an array order

I need to activate a heartbeat CSS animation on 6 different divs, but I want to do it in a specific sequence. For instance, let's say I have an array: self.arraySequence = [0,3,5,3]; In this array, each number represents the position of the div tha ...

Adjust the Subnav <li> element to take up 100% width and reposition the dropdown menu

My current challenge involves customizing a navigation bar using CSS. I am struggling with making the sub-menus expand to 100% width as they currently appear fixed in size. Additionally, I am trying to find a solution to display the submenu options on eith ...

I'm feeling a bit lost on how to pull out HTML tag elements using Python

I have been attempting to extract the html tags for alternative purposes, but due to the structure of the html file, I am facing challenges using conventional methods to locate the elements. The section containing the elements is quite long (consisting of ...

Remove HTML formatting from excel cells and fill separate cells

Is there a way to condense HTML code and fill different columns in Excel? For instance, If my HTML code looks like this: <p></p>10-16-2013 22:35<br/>I love pizza! Ordering was a breeze!<p></p>10-16-2013 13:19:46<br />t ...

"Enhancing User Experience with Hover Effects in HTML using .common

I'm pretty new to coding and currently working on a Github repository. On the same page, I have 12 clickBoxes that each have a hover effect applied where a PNG appears upon hovering. However, I've run into an issue where either the hover effect w ...

Checkbox option to change background color of table cell

$('#selectall1').click(function(event) { if (this.checked) { $('.first').each(function() { this.checked = true; }); $('.second').each(function() { this.checked = false; }); $('.third&apos ...

Adjusting the appearance of dropdown option borders in HTML/CSS - customize or eliminate borders as

select { width: 300px; font-family: inherit; font-size: 18px; padding-top: 10px; padding-bottom: 10px; padding-right: 30px; display:block; color: #999; border: none; border-bottom: 1px solid #757575; } *:focus { outline: #757575; } ...