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 }
}
cssmedia

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:

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>

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 printed PDF of a webpage does not display HTML table background colors in Chrome or Firefox

Is there a way to change the colors of table cells in an HTML table when exporting to PDF? I'm creating content dynamically that includes background-color: #ffffff (or red) and showing it on a webpage, but the cell backgrounds appear as white in the P ...

htmlcsspdfpdf-generationbackground-color

Combining Versioning with BundleConfig.cs: A Comprehensive Guide

Encountering a recurring issue where changes made to CSS or Javascript files do not reflect in client browsers unless they manually refresh the page with ctrl+F5. This poses a challenge, especially in a school system with numerous users who may not be awar ...

javascriptcssversioningbundling-and-minification

Ensure the footer remains fixed while scrolling

For the past day, I've been tackling a challenge with my online shop project. On the specific item's page, I want to include a fixed [add to cart] button as a footer initially, which then becomes sticky when scrolling to a certain point. You can ...

javascripthtmljquerycss

The navigation bar vanishes as soon as I click the Modal button

I am experiencing an issue where the Navbar disappears when I open a modal while using Bootstrap. Navbar before opening Modal https://i.stack.imgur.com/Oo9qb.png Navbar after opening Modal https://i.stack.imgur.com/dlK1V.png <script src="https:// ...

htmlcssnavbarbootstrap-5bootstrap5-modal

Mobile navigation menu options on the left and right sides

I've encountered an issue with my mobile navigation. I have two navigation menus - one on the left and one on the right, designed to slide out when triggered. The left menu functions correctly with a smooth transition, but the right menu abruptly pops ...

jquerycssnavigation

How to center align an HTML page on an iPhone device

I am currently testing a HTML5 webpage on my iPhone, utilizing CSS3 as well. The page appears centered in all browsers except for the iPhone, where it is left aligned. I have attempted to use the following viewport meta tag: <meta name="viewport" conte ...

iphonehtmlcss

Exploring the world of animation with Jquery and images

I'm delving into the world of jQuery to create some captivating animations. Currently, I've been tasked with an assignment involving images that expand, contract, change opacity, and eventually hide. Below is my code snippet: function play_pic1 ...

jqueryhtmlcss

Steps for designing a single-column content-focused layout

Creating a single column fixed-width layout with a header and footer, the order of view should be as follows: header navigation dynamic content 1 dynamic content 2 main content footer The dynamic contents (3, 4, 5) will expand vertically with unknown he ...

htmlcss

Bootstrap sticky footer with adjustable height

Striving to achieve a sticky footer with a custom height on my website has turned out to be more challenging than I initially expected. Presented below is a snapshot of the current state of my footer: The issue arises where my contact form is concealed b ...

htmlcsstwitter-bootstrapfootersticky

What is the best way to place a button within a line of text

I am trying to achieve a layout similar to this: -------------------button------------------ I can add text inside the line, but it doesn't look good when I add a button. Any suggestions on how I can improve this? ...

htmlcss

Expand a section of the background picture

I am working with an image that contains multiple flag images: https://i.stack.imgur.com/xg0iM.jpg I have a div element with the dimensions: width:100px; height:50px. My goal is to resize each flag to fit inside it: .flag{ wi ...

htmlcss

Incorporate a Background Image, which is linked to a website URL, by utilizing an external CSS file within

I am struggling to incorporate an external CSS file (specifically a background image from a URL) into my HTML document. I have successfully applied internal CSS, so the issue is not with the website link. Despite reviewing similar posts addressing comparab ...

htmlcss

Dimensions of CSS Buttons

On my screen, I have 3 buttons with varying sizes determined by their padding. As the text wraps within each button, they adjust in height accordingly. However, the issue arises when the buttons end up being different heights. Instead of setting a specific ...

htmlcss

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

A div element designed to showcase a speedometer; <div class="outer"> <div class="needle" ></div> </div> The speedometer animates smoothly on hover; .outer:hover .needle { transform: rotate(313deg); transform-origin: ce ...

javascriptjqueryhtmlcsscss-animations

The div is not positioned on the left side

I'm struggling with aligning three divs next to each other in HTML and CSS. I've set them to float: left, but they are not obeying this style rule. .threethings { width: 20%; } .threethings div { text-align: center; position: relative; ...

htmlcssweb

Is there a way for me to determine if a user has engaged with a form?

I'm surprised by how difficult it was to find information on this topic through Google. Currently, my struggle lies in wanting my form fields to change color based on validity only after the user has interacted with the form. I don't want invali ...

htmlcss

A blank screen of errors pops up when attempting to update through a form

Encountering a white error screen when attempting to add an item using a form in Python / Django. I'm currently debugging the issue but lacking information. Any guidance on where to look next would be greatly appreciated. Models.py from __future__ i ...

javascriptpythonhtmlcssdjango

Attempting to modify the background hue of a grid component when a click event is triggered

I am struggling with the syntax to change the color of an element in my grid when clicked. I have attempted different variations without success. Being new to JavaScript, I would appreciate some gentle guidance if the solution is obvious. JS const gri ...

javascripthtmlcss

Not all words are compatible with word-wrap, don't you think?!

I have a situation where I used the following CSS properties for a div: word-wrap: break-word; text-align: justify; When a single word is too long to fit within the width of the div, it wraps or breaks into multiple lines. However, if a second word with ...

javascripthtmlcss

Having trouble with CSS :before pseudo-element and sibling selector?

Looking for a CSS solution to change the appearance of a triangle when the .hide class is activated within my markup. I attempted using a pseudo-element like so: summary:before { content: '\25BC'; } summary:before + .hide { con ...

css