HTML Guide
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.
This property can express a value in different units like px, em, % or ch, and keyword values, but auto is not an allowed value.
Some examples of valid values for max-width:
/* <length> value */
max-width: 3.5em;
/* <percentage> value */
max-width: 75%;
/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(20em);
/* Global values */
max-width: inherit;
max-width: initial;
max-width: revert;
max-width: unset;Learn more:
Related W3C validator issues
The CSS property padding-block does not accept auto as a value. The padding-block property is used to set the padding on the block-level start and end sides of an element, and it expects length values (like px, em, %, etc.) or global values like inherit, initial, revert, revert-layer, unset.
Here’s how you can fix this issue by providing valid values for the padding-block property.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Padding Block Example</title>
<style>
.example {
/* Incorrect use of 'auto' */
/* padding-block: auto; */
/* Correct use of padding-block with length values: */
padding-block: 20px 10px;
/* You can also use single value for same padding on both sides: */
/* padding-block: 15px; */
/* Or use percentage values: */
/* padding-block: 2% 1%; */
/* Or inherit, initial, revert, unset */
/* padding-block: inherit; */
}
</style>
</head>
<body>
<div class="example">
This is an example demonstrating correct use of padding-block.
</div>
</body>
</html>Explanation:
-
Length values: You can specify the padding using absolute units like px, em, rem, etc. In the example above, padding-block: 20px 10px; applies 20px padding to the block-start and 10px to the block-end.
-
Single Length Value: Using padding-block: 15px; applies the same padding (15px) to both block-start and block-end.
-
Percentage values: padding-block: 2% 1%; will apply 2% of the containing block’s size to block-start and 1% to block-end.
-
Global values: You can also use inherit, initial, revert, revert-layer, or unset to control CSS inheritance and initial values.
The <table> element does not accept a height attribute. Use CSS instead.
The height attribute on the <video> element must be a non-negative integer representing the height in CSS pixels. The value “auto” is not a valid value for this attribute. To resolve the issue, set the height attribute to a specific numeric value or adjust the height using CSS instead.
Example with a numeric height value:
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Alternatively, control the height using CSS:
<video width="640" controls style="height: auto;">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>In the CSS approach, “auto” can be used, but it should not be part of the HTML attributes.
The width and height attributes on <img> elements expect a digit to specify the dimension in pixels. It should not contain units, letters or percent signs.
You can achieve this using CSS instead, for example:
<!-- Invalid syntax, the height attribute expects only digits -->
<img src="photo.jpg" alt="cat" height="auto" />
<!-- Valid syntax using CSS -->
<img src="photo.jpg" alt="cat" style="height: auto" />The sizes attribute specifies the size of the image when it is displayed on different devices.
The error message is saying that the value auto is not a valid value for the sizes attribute.
To fix this issue, you need to replace the value auto with a valid size. You can use a width descriptor or a media query to specify the size for different device widths.
Here’s an example of using a width descriptor:
<img src="example.jpg" sizes="(max-width: 600px) 100vw, 50vw" />This example sets the size of the image to 100% of the viewport width when the device width is less than or equal to 600px, and 50% of the viewport width for larger device widths.
Alternatively, you can remove the sizes attribute altogether and let the browser decide the best size for the image based on the viewport size.
<img src="example.jpg" />If you do this, the browser will use the default sizes value of 100vw and will scale the image accordingly.
The width attribute on the img element must be a positive integer representing the number of pixels.
The HTML img element’s width and height attributes are expected to specify image dimensions in pixels. According to the HTML Living Standard, these attributes accept only non-negative integers. These integers define the rendered dimension of the image, overriding the actual image size based on its native resolution. The value “auto” is not a valid integer, which leads to the validation error you’ve encountered.
Here is a correct usage example of the img element:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Image Width</title>
</head>
<body>
<img src="example.jpg" alt="Example image" width="200" height="100">
</body>
</html>In the example above, the width is set to 200, and the height is set to 100. Both values are non-negative integers representing pixel dimensions. If you intend to maintain the image’s aspect ratio while adjusting another dimension, you can omit one of the attributes, and modern browsers will automatically adjust the aspect ratio based on the given dimension.
The error message is indicating that the width attribute of the <video> element has an invalid value. According to the HTML specification, the width attribute expects a non-negative integer value, representing the pixel width of the video.
The value "auto" is not valid for the width attribute. Instead, specify a full number that indicates the pixel width of the video. If you want the video to be responsive without specifying a fixed width, you can use CSS to achieve that.
Here are two ways to resolve this:
-
Specify a valid pixel value for width:
<video width="640" height="360" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> -
Use CSS for a responsive video player:
Instead of using the width attribute, use CSS to set the width of the video element. This allows the video to adjust its size according to the container or viewport.
<style> .responsive-video { width: 100%; height: auto; } </style> <video class="responsive-video" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
In the second example, the video will scale based on its containing element, maintaining its aspect ratio due to the height: auto; CSS rule. This approach offers more flexibility for responsive design.
To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).
In the following example, this media query expresses that the style sheet is only linked if the width of the viewport 768px maximum:
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="styles.css">To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).
In the following example, this media query expresses that the style sheet is only linked if the width of the viewport is greater than 768px:
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="styles.css">The issue you’re encountering indicates that the CSS property align-items is being set to a value of auto, which is not a valid value for this property according to the CSS specification. The align-items property is used in flexbox and grid layouts to define how items are aligned along the cross axis.
Fixing the Issue:
-
Understand Valid Values: The valid values for the align-items property include:
/* Basic keywords */ align-items: normal; align-items: stretch; /* Positional alignment */ /* align-items does not take left and right values */ align-items: center; align-items: start; align-items: end; align-items: flex-start; align-items: flex-end; align-items: self-start; align-items: self-end; align-items: anchor-center; /* Baseline alignment */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* Overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* Global values */ align-items: inherit; align-items: initial; align-items: revert; align-items: revert-layer; align-items: unset; -
Choose a Correct Value: Based on the desired alignment, choose one of the valid values. For instance:
- Use flex-start to align items to the start of the container.
- Use center to align items in the center.
- Use stretch to stretch items to fill the container.
-
Example Correction: If your original CSS was:
.container { display: flex; align-items: auto; /* This is invalid */ }You could change it to:
.container { display: flex; align-items: center; /* This is valid */ }
Conclusion:
Replace the invalid auto value with a valid option that suits the design you aim for, making sure to test the layout after applying changes to confirm that the items align as intended.