Unexpected activation of Internet Explorer media queries causing display issues

Check out my CSS code below:

@media all and (max-width: 500px){
    .calendar_head{
        height: 120px;
        line-height: 60px;
    }
}
.calendar_head{
    width: 100%;
    font-weight: 700;
    color: #6a7783;
    text-align: center;
    line-height: 30px;
}

Interestingly, in Internet Explorer 11 (and possibly other versions), the media query kicks in right when the page loads, regardless of the viewport width. It's only upon resizing the page that it recognizes the media query shouldn't be applied.

Answer №1

Consider rearranging the order of your media-query and normal class state, as well as adding a height to the non-media query.

.calendar_head{
    width: 100%;
    font-weight: 700;
    color: #6a7783;
    text-align: center;
    line-height: 30px;
    height: auto;
}
@media all and (max-width: 500px){
    .calendar_head{
        height: 120px;
        line-height: 60px;
    }
}

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

jQuery's capability to select multiple elements simultaneously appears to be malfunctioning

I am dynamically creating div elements with unique ids and adding span elements with specific CSS properties. $(".main").append("<div class=largeBox id=" + counter + "</div>"); $(".largeBox").append("<span class=mainTitle></span>"); ...

Using HTML and JavaScript to implement a dragging functionality on a canvas element

After creating a square grid using HTML canvas, I've added a drag feature that allows users to draw rectangles by dragging over the grid. However, it seems that non-rectangle shapes can also be drawn in certain cases. Let's delve into an additio ...

"Troubles with directing on websites using jQuery, CSS,

I have been struggling with creating this navigation bar for weeks now and I keep running into issues. What I am attempting to achieve is a primary navigation bar that, when hovered over, displays a secondary navigation menu below and slightly to the righ ...

Only on mobile devices, Material-UI components spill over the screen

Update: This issue is isolated to one specific page. Other pages within the website are displaying correctly. Recently, I developed a web page using React and Material-UI. The main components utilized are Grid and Container. While the layout appears fine ...

Ways to enable JavaScript code to accept input from both a text field and a text

I have a JavaScript code that allows users to input text and choose to make it bold, italicized, or underlined. For example, if the user checks the bold option, the text will appear in bold format. Here is the JavaScript code I am using: $('input[n ...

Here is a guide on updating HTML table values in Node.js using Socket.IO

I successfully set up socket io communication between my Node.js backend and HTML frontend. After starting the Node.js server, I use the following code to emit the data 'dRealValue' to the client side: socket.emit ('last0', dRealValue) ...

When the audio on the device is in use, the video will not play and vice versa

Whenever my video starts playing, the audio from my device (such as iPod or Spotify) stops. If I try to play the audio manually while the video is playing, the video freezes. Interestingly, when I tested playing an audio file directly within the app, it wo ...

How to dynamically adjust the size of an HTML page using jQuery without displaying

Currently, I am working on resizing an HTML page vertically using jQuery. While I have successfully managed to resize the page, I encounter a problem where depending on the image used, I sometimes see vertical or horizontal bars even though the image fits ...

Field input displacement

I am experiencing an issue with my contact form, specifically with the message subject field displayed as a menu. The problem only seems to occur on wide desktop displays, where it appears offset from the rest of the form. Despite my efforts to troublesho ...

Prevent the row height from fluctuating following the fadeOut() effect

Currently, I am facing an issue with two elements on my page: .start_over_button and .speed_buttons. In CSS, the .start_over_button is set to display: none, and in my JavaScript code, I have it so that when .speed_buttons are clicked, they fade out and the ...

The styling in Docker for Asp.Net Core is not being properly displayed

I recently deployed my first ASP.NET Core application using Visual Studio for Mac inside a Docker container on Linux. However, I'm facing an issue where the CSS is not being applied and the JavaScript is not functioning as expected. It seems like the ...

Displaying Image from Jquery Ajax Response

I have a PHP script that can resize images with specified dimensions by passing the width and height as variables like so: resize.php?width=100&height=200. The content-type of this PHP script is set to image/jpg. Additionally, I have an HTML page wher ...

The div elements are constantly shifting positions when viewed in Internet Explorer

After completing my website and testing it across different browsers, I noticed an issue with IE. The contact div and navigation shift around the page in this browser specifically. Can anyone help me out with some code to fix this problem? Link to live ex ...

Using Google Analytics to monitor open rates and click-through rates of emails

After carefully reviewing the document, I noticed a unique track code that should be able to assist me. However, I am unsure about how to effectively utilize it in order to obtain the open rates and URL click rates. Regarding open rates: I am currently us ...

What is the process for setting the opacity of the background in ::selection to 1?

Is it possible to have selected text with a solid background rather than a transparent one? Using opacity: 1 does not achieve the desired effect due to some standard override by the browser or other factors. ::-moz-selection { background: #fff; colo ...

Using `encodeURIComponent` to encode a URL does not function properly when used with a form action

After experimenting with the encodeURI function in conjunction with a form, I discovered an interesting behavior. I used encodeURI to encode a URL. <html> <head> </head> <body> <form id="form"> </form> <button id="bu ...

Sometimes, in extremely rare instances, external stylesheets may fail to download or be properly applied

There have been very rare occurrences where major websites like Amazon and Facebook do not load a CSS file or apply the rules correctly, resulting in pages looking incomplete: I was recently asked to provide an internal explanation after receiving a compl ...

How can I center a <a> vertically within a list that has varying heights?

Help Needed: Alignment Issue with Anchor Tags in List I am facing a challenge with vertically aligning the anchor tags inside my list. The number of list items varies based on the pages of my website, so I have used display flex on the list and flex: 1 on ...

What is the best way to generate a box when a button is pushed?

How can I make a button create a box with text inside it when clicked? <div class="trades"> </div> <button onclick="create()">add</button> Here is the JavaScript function to create the box: function create() { var box = docu ...

Adjust the size of iCheck jQuery radio buttons

I have implemented the iCheck Plugin for radio buttons in Angular Directive, but I am facing an issue with resizing the radio button to a smaller size. Does anyone have any suggestions or solutions for this? ...