Media queries css как адаптировать сайт

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Another Breakpoint

You can add as many breakpoints as you like.

We will also insert a breakpoint between tablets and mobile phones.

Desktop

Tablet

Phone

We do this by adding one more media query (at 600px), and a set of new classes for devices larger than 600px
(but smaller than 768px):

Example

Note that the two sets of classes are almost identical, the only
difference is the name ( and ):

/* For mobile phones: */ { width: 100%;}@media only screen and (min-width: 600px) {

/* For tablets: */ .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}}@media only screen and (min-width:
768px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;}
.col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;}
.col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;}
.col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;}
.col-12 {width: 100%;}}

It might seem odd that we have two sets of identical classes, but it gives us the
opportunity in HTML, to decide what will happen with the columns at each
breakpoint:

HTML Example

For desktop:

The first and the third section will both span 3 columns each. The middle section will span 6 columns.

For tablets:

The first section will span 3 columns, the second will span 9, and the third section will be displayed below the first two sections, and it will span 12 columns:

Status of This Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable document and may be used as reference material or cited from another document. W3C’s role in making the Recommendation is to draw attention to the specification and to promote its widespread deployment. This enhances the functionality and interoperability of the Web.

Please see the Working Group’s implementation report
and the Media Queries Test Suite.

Also see the Disposition of comments and a relative to the previous Proposed Recommendation.

Publication as a W3C Recommendation does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by the CSS
Working Group (part of the Style Activity).

This document was produced by a group operating under the 5 February 2004 W3C Patent
Policy. W3C maintains a public list of any patent disclosures made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains must disclose the information in accordance with .

This document is the same as the previous, Proposed Recommendation version: except for the style sheet, editorial changes to the front matter such as the title and date, and removal of the older changes section.

CSS Syntax

@media not|only mediatype and (mediafeature and|or|not
mediafeature) { CSS-Code;}

meaning of the not, only and and keywords:

not: The not keyword inverts the meaning of an entire media
query.

only: The only keyword prevents older browsers that do not support media queries with media features from applying the specified styles.
It has no effect on modern browsers.

and: The and keyword combines a media feature with a media
type or other media features.

They are all optional. However, if you use not or
only, you must also specify a media type.

You can also have different stylesheets for different media, like
this:

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphensimage-rendering@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmask-imagemask-originmask-positionmask-repeatmask-sizemax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-index

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Add a Breakpoint

Earlier in this tutorial we made a web page with rows and columns, and it
was responsive, but it did not look good on a small screen.

Media queries can help with that. We can add a breakpoint where
certain parts of the design will behave differently on each side of the
breakpoint.

Desktop

Phone

Use a media query to add a breakpoint at 768px:

Example

When the screen (browser window) gets smaller than 768px, each column should have a width of 100%:

/* For desktop: */.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}
.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}
.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}
.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width:
100%;}@media only screen and (max-width: 768px) { /* For mobile phones: */

{ width: 100%; }}

Abstract

HTML4 and CSS2 currently support media-dependent style sheets tailored
for different media types. For example, a document may use
sans-serif fonts when displayed on a screen and serif fonts when printed.
‘’ and ‘’ are two media types that have been defined.
Media queries extend the functionality of media types by allowing
more precise labeling of style sheets.

A media query consists of a media type and zero or more expressions that
check for the conditions of particular media features. Among the
media features that can be used in media queries are ‘’, ‘’, and ‘’. By using media queries, presentations can
be tailored to a specific range of output devices without changing the
content itself.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Min Width to Max Width

You can also use the values to set a minimum width and a maximum width.

For example, when the browser’s width is between 600 and 900px, change the
appearance of a <div> element:

Example

@media screen and (max-width: 900px) and (min-width: 600px) {  div.example {
font-size: 50px;    padding: 50px;
border: 8px solid black;    background: yellow; }}

Using an additional value: In the example below, we add an additional media query to our already
existing one using a comma (this will behave like an OR operator):

Example

/* When the width is between 600px and 900px OR above 1100px
— change the appearance of <div> */@media screen and (max-width: 900px) and (min-width:
600px), (min-width:
1100px) {  div.example {
font-size: 50px;    padding: 50px;
border: 8px solid black;    background: yellow; }}

Media Queries Simple Examples

One way to use media queries is to have an alternate CSS section right inside your style sheet.

The following example changes the background-color to lightgreen if the
viewport is 480 pixels wide or wider (if the viewport is less than
480 pixels, the background-color will be pink):

Example

@media screen and (min-width: 480px) { body {
background-color: lightgreen; }}

The following example shows a menu that will float to the left of the page if
the viewport is 480 pixels wide or wider (if the viewport is less than
480 pixels, the menu will be on top of the content):

Example

@media screen and (min-width: 480px) { #leftsidebar
{width: 200px; float: left;} #main
{margin-left: 216px;}}

CSS @media Reference

For a full overview of all the media types and features/expressions, please look at the
@media rule in our CSS reference.

❮ Previous
Next ❯

Background

(This section is not normative.)

HTML4
and CSS2
currently support media-dependent style sheets tailored for different
media types. For example, a document may use different style sheets for
screen and print. In HTML4, this can be written as:

Inside a CSS style sheet, one can declare that sections apply to certain
media types:

The ‘’ and ‘’ media types are defined in HTML4. The
complete list of media types in HTML4 is: ‘’, ‘’, ‘’, ‘’, ‘’, ‘’, ‘’,
‘’. CSS2 defines the same list,
deprecates ‘’ and adds
‘’ and ‘’. Also, ‘’ is used to indicate that the style sheet
applies to all media types.

Media-specific style sheets are supported by several user agents. The
most commonly used feature is to distinguish between ‘’ and ‘’.

There have been requests for ways to describe in more detail what type
of output devices a style sheet applies to. Fortunately HTML4 foresaw
these requests and defined a forward-compatible syntax for media types.
Here is a quote from :

Media queries, as described in this specification, build on the
mechanism outlined in HTML4. The syntax of media queries fit into the
media type syntax reserved in HTML4. The
attribute of HTML4 also exists in XHTML and generic XML. The same syntax
can also be used inside in the ‘’
and ‘’ rules of CSS.

However, the parsing rules for media queries are incompatible with those
of HTML4 so that they are consistent with those of media queries used in
CSS.

HTML5 (at the moment of writing
still work in progress) references the Media Queries specification
directly and thus updates the rules for HTML.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Media Features

Value	Description
any-hover	Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
aspect-ratio	The ratio between the width and the height of the viewport
color	The number of bits per color component for the output device
color-gamut	The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4)
color-index	The number of colors the device can display
grid	Whether the device is a grid or bitmap
height	The viewport height
hover	Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
inverted-colors	Is the browser or underlying OS inverting colors? (added in Media Queries Level 4)
light-level	Current ambient light level (added in Media Queries Level 4)
max-aspect-ratio	The maximum ratio between the width and the height of the display area
max-color	The maximum number of bits per color component for the output device
max-color-index	The maximum number of colors the device can display
max-height	The maximum height of the display area, such as a browser window
max-monochrome	The maximum number of bits per «color» on a monochrome (greyscale) device
max-resolution	The maximum resolution of the device, using dpi or dpcm
max-width	The maximum width of the display area, such as a browser window
min-aspect-ratio	The minimum ratio between the width and the height of the display area
min-color	The minimum number of bits per color component for the output device
min-color-index	The minimum number of colors the device can display
min-height	The minimum height of the display area, such as a browser window
min-monochrome	The minimum number of bits per «color» on a monochrome (greyscale) device
min-resolution	The minimum resolution of the device, using dpi or dpcm
min-width	The minimum width of the display area, such as a browser window
monochrome	The number of bits per «color» on a monochrome (greyscale) device
orientation	The orientation of the viewport (landscape or portrait mode)
overflow-block	How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
overflow-inline	Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
resolution	The resolution of the output device, using dpi or dpcm
scan	The scanning process of the output device
scripting	Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4)
update	How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
width	The viewport width

Media Queries For Menus

In this example, we use media queries to create a responsive navigation menu, that varies
in design on different screen sizes.

Large screens:

Home
Link 1
Link 2
Link 3

Small screens:

Home
Link 1
Link 2
Link 3

Example

/* The navbar container */.topnav { overflow: hidden;
background-color: #333;}/* Navbar links */.topnav a {  float:
left;  display: block;  color:
white;  text-align: center;  padding: 14px 16px;
text-decoration: none;}
/* On screens that are 600px wide or less, make the menu links stack on top
of each other instead of next to each other */@media screen and (max-width: 600px) {

.topnav a {    float: none;    width:
100%;  }}

Syntax

The media query syntax is described in terms of the CSS2 grammar. As such,
rules not defined here are defined in CSS2. The
production defined below replaces the
production from CSS2.

media_query_list
 : S* * ]?
 ;
media_query
 : ? S* media_type S* *
 | expression *
 ;
media_type
 : IDENT
 ;
expression
 : '(' S* media_feature S* ? ')' S*
 ;
media_feature
 : IDENT
 ;

COMMENT tokens, as defined by CSS2, do not occur in the grammar (to keep
it readable), but any number of these tokens may appear anywhere between
other tokens.

The following new definitions are introduced:

L  l|\\0{0,4}(4c|6c)(\r\n|)?|\\l
Y  y|\\0{0,4}(59|79)(\r\n|)?|\\y

The following new tokens are introduced:

{O}{N}{L}{Y}      {return ONLY;}
{N}{O}{T}         {return NOT;}
{A}{N}{D}         {return AND;}
{num}{D}{P}{I}    {return RESOLUTION;}
{num}{D}{P}{C}{M} {return RESOLUTION;}

is to be added to the CSS2
production.

CSS style sheets are generally case-insensitive, and this is also the
case for media queries.

In addition to conforming to the syntax, each media query needs to use
media types and media features according to their respective specification
in order to be considered conforming.

Only the first media query is conforming in the example below because
the «example» media type does not exist.

3.1. Error Handling

For media queries that are not conforming user agents need to follow the
rules described in this section.

Unknown media types. Unknown media types evaluate to
false. Effectively, they are treated identically to known media types
that do not match the media type of the device.

The media query «» will evaluate to false, unless
is actually a supported media type. Similarly,
«» will evaluate to true.

Unknown media types are distinct from media types that do
not actually match the IDENT production. Those fall under the malformed
media query clause.
Unknown media features. User agents are to represent
a media query as «» when one of the specified media
features is not known.

In this example, the first media query will be represented as
«» and evaluate to false and the second media query
is evaluated as if the first had not been specified, effectively.

Is represented as «» because the ‘’ feature does not accept the
‘’ prefix.
Unknown media feature values. As with unknown media
features, user agents are to represent a media query as «» when one of the specified media feature values is not known.

The media query specifies an unknown
value for the ‘’ media feature
and is therefore represented as «».

This media query is represented as «» because
negative lengths are not allowed for the ‘’ media feature:
Malformed media query. User agents are to handle
unexpected tokens encountered while parsing a media query by reading
until the end of the media query, while observing of (), [], {}, «», and », and correctly
handling escapes. Media queries with unexpected tokens are represented
as «».

The following is an malformed media query because having no space
between ‘’ and the expression is
not allowed. (That is reserved for the functional notation syntax.)

Media queries are expected to follow the error handling rules of the
host language as well.

… will not apply because the semicolon terminates the
rule in CSS.

Media Query Syntax

A media query consists of a media type and can contain one or more
expressions, which resolve to either true or false.

@media not|only mediatype and (expressions) { CSS-Code;}

The result of the query is
true if the specified media type matches the type of device the document is
being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are
applied, following the normal cascading rules.

Unless you use the not or only operators, the media type is optional and the
type will be implied.

You can also have different stylesheets for different media:

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Always Design for Mobile First

Mobile First means designing for mobile before designing for desktop or any
other device (This will make the page display faster on smaller devices).

This means that we must make some changes in our CSS.

Instead of changing styles when the width gets smaller than
768px, we should change the design when the width gets larger than
768px. This will make our design Mobile First:

Example

/* For mobile phones: */ { width: 100%;}@media only screen and (min-width:
768px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;}
.col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;}
.col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;}
.col-12 {width: 100%;}}