css - using a media query to only target tablet and dektop - TagMerge
3using a media query to only target tablet and dektopusing a media query to only target tablet and dektop

using a media query to only target tablet and dektop

Asked 5 months ago
0
3 answers

You should do this:

    @media screen :not(media) (max-width: 600px){
        display: flex;
        flex-direction: row;
        align-items: stretch; 
  }

Source: link

0

Media types describe the general category of a given device. Although websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screenreaders. For example, this CSS targets printers:
@media print { ... }
You can also target multiple devices. For instance, this @media rule uses two media queries to target both screen and print devices:
@media screen, print { ... }
Media features describe the specific characteristics of a given user agent, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions. This example applies styles when the user's primary input mechanism (such as a mouse) can hover over elements:
@media (hover: hover) { ... }
Many media features are range features, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's viewport width is equal to or narrower than 12450px:
@media (max-width: 12450px) { ... }
If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is not zero (or none, in Level 4). For example, this CSS will apply to any device with a color screen:
@media (color) { ... }

Source: link

0

If the browser window is 600px or smaller, the background color will be lightblue:
@media only screen and (max-width: 600px) {  body {
   
background-color: lightblue;  }}
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: */
    
[class*="col-"] {    width: 100%;  }}
Example
/* For mobile phones: */[class*="col-"] {  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%;}}
Note that the two sets of classes are almost identical, the only difference is the name (col- and col-s-):
/* For mobile phones: */[class*="col-"] {  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%;}}
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:
<div class="row">  <div class="col-3 col-s-3">...</div>  <div 
class="col-6 col-s-9">...</div>  <div 
class="col-3 col-s-12">...</div></div>

Source: link

Recent Questions on css

    Programming Languages