Search code examples
csswebflow

Css code that seems to optimize,

I was curious to what this code does. I found it on a site, and I am wondering if it has anything to with device optimization. It seems to effect the whole page through all devices. Especially the part that says "@media screen and (min-width:992px)".

<style>

html  {
  -webkit-font-smoothing: antialiased;
}

.w-container {
  max-width: 100%; 
}

.w-container .w-row {
  margin-left: 0;
  margin-right: 0;
} 

.w-row {
  margin-left: 0;
  margin-right: 0;
}

.w-row .w-row {
  margin-left: 0;
  margin-right: 0;
}

.w-col .w-col, .w-col {
  padding-left: 0;
  padding-right: 0;
}

.pad-row .w-col {
  padding-left: 10px;
  padding-right: 10px;
}

.pad-row.w-row, .pad-row .w-row {
  margin-left: -10px;
  margin-right: -10px;
}

/*---------------------------------*/

.slider-outer {
    display: table;
    width:100%;
    height: 100%;
}
.slider-left, .slider-right {
    display: table-cell; 
    width:50%;
    height:100%;
    vertical-align: middle;
}
.slider-left {
    text-align: right;
}
.slider-right {
    text-align: left;
}

/*---------------------------------*/

.w-slider-nav-invert>div {
  border: white 3px solid;
  background: black;
}

.w-slider-nav-invert>div.w-active { 
  border: white 3px solid;
  background: white;
}

.w-slider-dot {
  width: 1em;
  height: 1em;
}

/*---------------------------------*/

.table {
    display:table;
    width: 100%;
}
.t-row {
    display:table-row;
}
.t-cell {
    display:block;
    vertical-align: top;
}
@media screen and (min-width:992px) {
  .t-cell {
      display:table-cell;
      vertical-align: top;
  }
}
</style>

I know that this is css, but it seems like clever code to make the page optimizable through all devices. It is in an html embed on this site https://preview.webflow.com/preview/uniqlo-responsive?preview=aacb16f7eb6a5df89780c3f5bbee094d. You can go in there and double click on an html embed, and the code will be there.

Solution

  • What you're looking at is known as a media query.

    The min-width: 992px you see denotes that the CSS inside of it will only trigger of viewports that are at least 992px wide (which is the equivalent of a laptop). You can think of media queries as 'conditional CSS logic' to control how a website looks on different devices.

    Note that the media queries pertain to the browser width / height, not the screen width / height. As such, manually resizing your browser window will trigger media query breakpoints.

    In this specific case, .t-cell { display: table-cell; vertical-align: top; } is applied when the viewport is at least 992px wide. This will make the content display in a tabular format on larger devices, while the content retains display: block for mobile devices (allowing it to stack).