Why isn't my CSS code responding to the media query properly?

Currently, I am utilizing media queries to adjust the appearance of my website based on different screen sizes...

Below is an excerpt of my HTML code:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="styles/style.css"/>

Here is a snippet of my CSS code:

@media screen and (max-widht: 650px) {
   .projects-grid{
       float: none;
       width: 100%;
       grid-template-columns: 100%;
     }
  }

Answer №1

 @media screen and (max-width: 650px) {
       .projects-grid{
           float: none;
           width: 100%;
           grid-template-columns: 100%;
         }
      }

There is a minor error in your media query where you wrote "widht" instead of "width"

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

How to incorporate HTML 5 video into your Angular 2 project using Typescript

How can I programmatically start an HTML video in TypeScript when the user clicks on the video area itself? Below is my HTML code: <div class="video"> <video controls (click)="toggleVideo()" id="videoPlayer"> <source src="{{videoSource ...

How to use plain JavaScript to extract the value from a textarea in GWT

Situation: I am currently developing a tampermonkey script to enhance certain GWT pages within a third-party application. Unfortunately, I do not have access to the source code or servers. Challenge: My task is to retrieve the value of a textarea element ...

Focus on the iPad3 model specifically, excluding the iPad4

I am looking to apply specific CSS that works on iPad 3, but not on iPad 4, or vice versa. Currently, I am able to target both versions by using the following code: @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( m ...

Embed a unique custom design sheet within a Facebook iframe

I'm looking to customize the design of my Facebook feed by adding a custom style sheet inside a Facebook iframe. Here's what I have: <iframe width="1000px" height="1000px" frameborder="0" name="f1e348592ed856c" allowtransparency="true" allo ...

Attempting to automate the process of clicking a button on a webpage using cefsharp

Hello, I am currently working with cefsharp and vb.net to develop a code that will help me navigate to the next page of a specific website. The website link is: https://www.recommendedagencies.com/search#{} My goal is to extract the list of company names ...

Struggling to retrieve the dynamic select list information from HTML and pass it to PHP. Any suggestions or guidance would be greatly

<form method="POST" name="mailform" action="sendmail.php"> <fieldset> <?php require_once("mysql_connect.php"); $sql = mysql_query( " SELECT NAME FROM TABLE WHERE ID = ( SELECT ID FROM TABLE2 WHERE COLUMN = '$USERNAME') ORD ...

Customizing screen dimensions for a single page using jQuery mobile

I am currently facing an issue with adjusting the size of a specific page within my application. Even though I am using <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-den ...

I find myself grappling with the styling issue in MUI select

<FormControl> <Select labelId="unique-label" id="unique-id" value={1} className={styles.uniqueCustomSelectRoot} IconComponent={() => <MyUniqueIcon />} sx={{ " ...

How can login errors be displayed in a Django application?

When I try to log into my website using the custom login page, entering the correct account details allows me access. However, if I input the wrong information, the page just refreshes with the username and password fields empty. Is there a way to display ...

The PDF format is experiencing compatibility issues when used with the CSS property for page breaks after:

My PDF with CSS page breaks is not functioning properly, as the pages are not breaking as intended. Removing position:absolute solves the issue but leaves space after each page. I suspect it may be a CSS problem, but I'm unsure. If the issue lies wit ...

Is there a way to view an image before and after uploading it?

I am encountering an issue while attempting to display a preview of an image in a form. The HTML code involved is as follows: <form action="" method="post" enctype="multipart/form-data" name="personal_image" id="newHotnessForm"> <p><lab ...

I can't understand why this question continues to linger, I just want to remove it

Is there a valid reason for this question to persist? I'm considering removing it. ...

Disappearing table borders in print view on Firefox

I have been working on creating a printable table that displays correctly in Chrome. However, when viewed in Firefox, the table borders are not showing up. <body> <table> <tbody> <tr> ...

Accessing information from a database and showcasing it within a tooltip

I have successfully implemented a tooltip feature using JavaScript and integrated it into an HTML page. Check out the code snippet below: $(document).ready(function () { //Tooltips $(".tip_trigger").hover(function (e) { tip = $(this).find('.tip&a ...

Enhancing the functionality of CSS frameworks using CSS modules

Currently, I am working on a React project where I need to customize CSS classes from frameworks like bootstrap. An example is when I want to modify the background color of a specific class (https://github.com/ColorlibHQ/AdminLTE/blob/v2.4.18/dist/css/Admi ...

Creating an HTML table from dynamic JSON data - A comprehensive guide

I am in need of a solution to transform JSON data into an HTML table format quickly and easily. Can anyone provide guidance on effectively utilizing PartialView to recursively render tables, ensuring that most details are visible? ...

Guide on creating an HTML5 rectangle for reuse using the Prototypal Pattern

I'm struggling to grasp Prototypal Inheritance through the use of the Prototypal pattern by creating a rectangle object and an instance of that rectangle. It seems like it should be straightforward, but I'm having trouble understanding why the Re ...

Alignment issue with Ul dropdown menus and shadow

After stumbling upon a fascinating menu design at this link, I decided to tweak it for center alignment by following the advice on this forum thread. Unfortunately, my efforts have hit a roadblock - the drop down menus aren't aligning as intended and ...

Verify that the input value changes onBlur

Is there a way to determine if the value of an input box has changed after blur? $("#username").on('blur', function() { $("#usertext").append("new input<br>"); }) Feel free to check out this jsFiddle example: https://jsfiddle.net/xztpts ...

How can I annotate the overall count of occurrences of a keyword across multiple models following filtration in Django?

I have a situation where my 'Keyword' model stores keywords for 4 other models, each with a 'key_list' field that is a ManyToManyField pointing back to the 'Keyword' model. The models have multiple keywords, and I am successfu ...