I'm struggling with my media query - it used to work perfectly, but now I can't figure out what went wrong

I seem to be having trouble with my media queries lately. They used to work fine, but now they seem to only render for specific screen sizes on certain pages. I'm targeting larger screens like (1920 x 1080) and (1680 x 1080). The code snippet is below:

@media only screen and (min-width: 1600px) {
    /* Styles for the about page */
}

@media only screen and (min-width: 1680px) {
    /* Styles for the services page */
}

@media only screen and (min-width: 1800px) {
    /* Styles for projects*/

}

@media only screen and (max-width:1140px) {
}

@media only screen and (max-width:1100px) {
}

@media only screen and (max-width:1000px){
}
    
@media only screen and (max-width:992px) {
}

@media only screen and (max-width:840px) {
}

@media only screen and (max-width:767px) {
}

@media only screen and (max-width:640px) {
}

@media only screen and (max-width:580px) {
}

@media only screen and (max-width:480px) {
}

@media only screen and (max-width:420px) {
}

@media only screen and (min-width:220px) and (max-width:480px) {
}

@media only screen and (min-width:767px) {
}

@media (min-width: 768px) {
}

@media (min-width: 1200px) {
}

I feel like I might be missing something with how I've structured my media queries. Any insights or suggestions would be greatly appreciated. You can view the actual page here.

Answer №1

It seems that the issue may be related to the organization of your media query CSS. I recommend reordering them as shown below for better readability and usability:

@media only screen and (max-width:420px) {
  .left-post-content {
    width: 80%;
    padding-bottom: 20px;
  }

  .left-post-back {
    margin-bottom: 20px;
  }

  ...more styles here...

}

Additionally, make sure to remove any leftover curly brackets and random styles, as well as thoroughly check each line of code for errors involving brackets.

Answer №2

You are encountering some issues with properly closing your queries and tags.

Some of the queries have been "double closed," with an extra } appearing before the

@media only screen and (min-width: 1680px)
and
@media only screen and (max-width:1140px)
queries.

Furthermore, within the

@media only screen and (min-width: 1800px)
query, your .pc tag remains unclosed.

A reliable validator or editor should have caught these mistakes sooner.

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

The scrollable dialogue disrupts the background's ability to flex and grow

My page layout is pretty simple: <main> <header>Header</header> <section>Content</section> <footer>Footer</footer> </main> <dialog>Dialog</dialog> In terms of CSS, here's how it ...

Leveraging concealed input for transmitting additional information via asynchronous JavaScript and XML (Ajax

My current approach involves using hidden inputs to include extra values with Ajax when a form is submitted by a user. The rationale behind this strategy is that I have a lengthy list of text fields, each accompanied by a button. Upon clicking any button, ...

Creative ways to design the HTML5 `<meter>` tag

I am curious about how to style the <meter> tag in a new way. <meter value=80 min=0 max=100> 80/100 </meter> All I want to do is customize the background color and the value color, but I haven't been able to locate the appropriat ...

Ensuring the continuous transmission of data frames is essential for WebSocket communication

Our system utilizes websocket technology to transmit user activity events such as clicks, mouse movement, scroll, input, and more. In addition to these events, we also send a snapshot of the HTML DOM. On average, the size of the HTML snapshot is approximat ...

Learn how to use JavaScript to copy just one specific DIV from a group of divs to the clipboard

Is there a way to copy text from multiple divs into the clipboard? Currently, I am only able to copy one piece of data at a time. <div id="div1">Text To Copy</div> <div id="div2">Text To Copy</div> <div id=&q ...

What steps can I take to prevent Internet Explorer from caching my webpage?

After implementing Spring MVC for Angular JS on the front end, I encountered an issue where logging in with different user credentials resulted in incorrect details being displayed. This problem only occurred in Internet Explorer, requiring me to manually ...

Issue encountered when trying to update MySQL database

I am encountering an issue with my PHP script that updates tables using a form and MySQL is throwing an error. Can anyone help me identify where I went wrong? case 'Save Changes': $note_id=(isset($_POST['note_id'])) ? $_POST[' ...

Ensure that the child element completely obscures the parent element

My goal is to have an image fill its parent element completely. <div class="parent"> <img src="image.jpg"> </div> If I use the following CSS: img{ width: 100%; } The image will only fill the parent horizontally, leaving empty s ...

Can you provide instructions on how to display data in two lines within a mat-select field?

Is it possible to show selected options in mat-select with long strings in two lines within the same dropdown? Currently, the string appears incomplete. You can see an example of this issue here: incomplete string example <mat-form-field class="f ...

Will divs avoid overlapping with both relative positioning and top styles?

In my design, there is a Navbar hamburger container and also a text container. Let's start with the nav container: .containerham{ width: 100%; height: max-content; -webkit-transform: translateY(-100%); transform: translateY(-100%); ...

After the form is submitted, the script is activated once more

Whenever I click the button that triggers an AJAX POST script multiple times, the script gets activated repeatedly. This results in items being created more than once. How can I solve this issue? $(document).delegate(".add_page_submit","click",fu ...

What issues arise when transitioning from PHP to JavaScript?

In my PHP code, I have a function that retrieves messages from the database. I want to set it up so that when a user clicks on a message, an alert will appear with the subject and body of the message using SweetAlert (I have already integrated SweetAlert). ...

Encountered an issue with processing JSON data in JQuery within the Spring MVC framework

I am in need of JQuery code that can retrieve JSON data from a Spring MVC Controller, process it, and then display the information in an HTML format. The name of my Spring MVC Controller is ProductInfo with the value being passed as "today". Click here t ...

Best method for integrating HTML pages into an Angular application

As I work on building my own website using Angular2 with Spring Boot and PostgreSQL as the Backend, I have successfully implemented login/logout features. However, I am facing challenges in understanding how to create a website like geeksforgeeks, which in ...

"The event triggers the function with an incorrect parameter, leading to the execution of the function with

Currently, I am working with a map and a corresponding table. The table displays various communities, each of which has a polygon displayed on the map. My goal is to have the polygons highlighted on the map when hovering over a specific element in the tabl ...

Hover Effect Dilemma with Div Element

Although it may seem like an easy question, I have been struggling with it for a week. On my website at this link, there is a portfolio section where the image changes to a description when the mouse hovers over it... My goal is to invert this behavior so ...

Mastering the art of centering three divs within a larger div using HTML and CSS

I'm having trouble centering three div elements within another div. I attempted to use verticle-align and negative margins, but nothing seems to be working. .float-container { border: 3px solid red; padding: 250px; position: relative; ...

What's the best way to showcase customized text formats within select option tags?

I need to have the following text displayed inside a dropdown menu: 1 day - until Friday 18th Dec 1 10.50 2 days - until Saturday 19th Dec 2 20.50 continue .... However, it seems like there is an issue as the spaces are being removed an ...

Ways to automatically update a page once the form response is received

After scouring various websites, I still haven't found a solution to my issue. What I need help with is how to refresh a page once a successful deletion message is received for a specific row. My admin2.php page displays information about the admin fr ...

Hover functionality for the border animation is disabled, but the SlideToggle feature is operating smoothly

I am interested in changing the right border color of a DIV when another one is hovered over. I had to use a unique solution to make slideToggle work, so I assume this will require a different approach as well. Below is the detailed code: $(document).rea ...