The @media feature is not functioning properly

Question

The @media feature is not functioning properly

I am struggling with getting my media query to function properly on a school project. Despite carefully checking my code, I cannot figure out why it is not making the desired changes when viewed on a mobile device. If anyone has any suggestions or insights, I would greatly appreciate it. Below are the head section of my HTML and the corresponding CSS:

<head>
<title>Pacific Trails Resort</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="pacific.css" rel="stylesheet">
<link href="pacificprint.css" rel="stylesheet" media="print">
</head>

@media only screen and (max-width: 1024px) {
body { margin: 0 ;
        padding: 0 ;
        background-image: none }
#wrapper { width: auto ;
            min-width: 0 ;
            margin: 0 ;
            box-shadow: none }
h1 { margin: 0 }
nav { float: none ;
        width: auto ;
        padding: 0.5em }
nav li { display: inline-block }
nav a { padding: 1em }
main { padding: 1em ;
        margin-left: 0 ;
        font-size: 90% }
footer { margin: 0 }
}

css media

Answer 1

Answer №1

The issue arises from the fact that half of your CSS rules lack a semicolon at the end.

Although the final CSS semicolon can be omitted in a statement, at-rules (such as media queries) are considered standalone statements themselves:

https://i.sstatic.net/t3dX4.png

A statement is defined as a building block that starts with any non-space characters and concludes with the first closing brace or semi-colon (outside a string, not escaped and not enclosed within another {}, (), or [] pair).

Hence, only your last rule can exclude the semicolon (the one for footer).

Nevertheless, including semicolons at the end of each line is recommended good practice and will not lead to any issues, so it's advisable to always strive for this consistency.

I have reformatted the code, ensuring there is a semicolon at the end of every line, in the example below (now functioning correctly):

@media only screen and (max-width: 1024px) {
  body {
    margin: 0;
    padding: 0;
    background-image: none;
  }
  #wrapper {
    width: auto;
    min-width: 0;
    margin: 0;
    box-shadow: none;
  }
  h1 {
    margin: 0;
  }
  nav {
    float: none;
    width: auto;
    padding: 0.5em;
  }
  nav li {
    display: inline-block;
  }
  nav a {
    padding: 1em;
  }
  main {
    padding: 1em;
    margin-left: 0;
    font-size: 90%;
  }
  footer {
    margin: 0;
  }
}

<head>
  <title>Pacific Trails Resort</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <link href="pacific.css" rel="stylesheet">
  <link href="pacificprint.css" rel="stylesheet" media="print">
</head>

Answer 2

The issue arises from the fact that half of your CSS rules lack a semicolon at the end.

Although the final CSS semicolon can be omitted in a statement, at-rules (such as media queries) are considered standalone statements themselves:

https://i.sstatic.net/t3dX4.png

A statement is defined as a building block that starts with any non-space characters and concludes with the first closing brace or semi-colon (outside a string, not escaped and not enclosed within another {}, (), or [] pair).

Hence, only your last rule can exclude the semicolon (the one for footer).

Nevertheless, including semicolons at the end of each line is recommended good practice and will not lead to any issues, so it's advisable to always strive for this consistency.

I have reformatted the code, ensuring there is a semicolon at the end of every line, in the example below (now functioning correctly):

@media only screen and (max-width: 1024px) {
  body {
    margin: 0;
    padding: 0;
    background-image: none;
  }
  #wrapper {
    width: auto;
    min-width: 0;
    margin: 0;
    box-shadow: none;
  }
  h1 {
    margin: 0;
  }
  nav {
    float: none;
    width: auto;
    padding: 0.5em;
  }
  nav li {
    display: inline-block;
  }
  nav a {
    padding: 1em;
  }
  main {
    padding: 1em;
    margin-left: 0;
    font-size: 90%;
  }
  footer {
    margin: 0;
  }
}

<head>
  <title>Pacific Trails Resort</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <link href="pacific.css" rel="stylesheet">
  <link href="pacificprint.css" rel="stylesheet" media="print">
</head>

The @media feature is not functioning properly

Answer №1

Similar questions

I want to create a custom jQuery slider totally from scratch

Ways to deactivate a button using CSS

Footer content spilling out of the wrapper div

jmpress: Scrolling through Absolutely Positioned Element (Slide) with dynamic height

Is it feasible to incorporate two distinct images into a single element using CSS layering?

How to toggle the visibility of a div with multiple checkboxes using the iCheck plugin for jQuery

Tapping on a DIV element that overlays a YouTube video on an iPad does not trigger any action

Firefox encounters a border-radius glitch

Error encountered: Unrecognized media in CSS validation and parsing issue

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Is there a way to change the color of a specific tab without affecting the content within it

Tips for adjusting text placement within table cells without altering the original dimensions of the td element?

Steps to display a div element periodically at set time intervals

Having trouble getting @media queries to work effectively across various screen sizes

How can I dynamically adjust the size of an image in a directory based on its filename with php?

Blank area located at the bottom of the document

What is the best way to combine a string with a variable in sass?

Fluid background images frame the header on either side, with a void of background in the center

Linking a Wordpress submenu to a specific section of a page

I am facing an issue where the inline CSS is not being applied in my