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 sizes attribute for an img element requires valid CSS syntax, and auto is not an acceptable value within that attribute.
The sizes attribute allows you to specify a list of media conditions and corresponding sizes for the images. Each condition determines which size of the image should be displayed at different viewport widths, ensuring responsive image delivery. The syntax for sizes should be a comma-separated list of media queries followed by a value denoting the corresponding width of the image. This width value may be in pixels (px) or as a percentage (vw, vh), but auto is not valid in this context.
Here is a breakdown of a correct sizes attribute usage:
- 50vw: This denotes that the image should take up 50% of the viewport’s width.
- (max-width: 600px) 100vw, 50vw: When the viewport is at most 600 pixels wide, the image should occupy the full width (100vw). Otherwise, it should take 50 percent of the viewport width.
Remove “auto” from your sizes value and provide a valid, contextually correct CSS value.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Images Example</title>
</head>
<body>
<img
src="image.jpg"
sizes="(max-width: 472px) 100vw, 472px"
srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1000w"
alt="A description of the image"
>
</body>
</html>In this example, if the viewport width is less than or equal to 472 pixels, the image will take up the entire width (100vw). For larger widths, the srcset specifies different image files for varying resolutions.