Breaking News: Grepper is joining You.com. Read the official announcement!

media query for responsive website

Add Answer

WinMaw answered on May 21, 2022 Popularity 10/10 Helpfulness 4/10

answer media query for responsive website

related responsive media query

related responsive media qurries

related responsive media queries

related Responsive Web Design - Media Queries

media query for responsive website

Comment

// start Device responsive

//mobile sm 320
@media screen and (max-width:374px){

}

//mobile md 375
@media screen and (min-width:375px) and (max-width:424px){
    
}

//mobile lg 425
@media screen and (min-width:425px) and (max-width:767px){
    
}

//tablet 768
@media screen and (min-width:768px) and (max-width:1023px){
    
}

//Laptop 1024
@media screen and (min-width:1024px) and (max-width:1439px){
    
}

//Laptop L 1440
@media screen and (min-width:1440px) and (max-width:2559px){
    
}

//4K 2560
@media screen and (min-width:2560px){
    
}


//end Device responsive

Popularity 10/10 Helpfulness 4/10 Language whatever

Source: Grepper

Tags: device media mobile responsive whatever

Link to this answer
Share Copy Link

Contributed on Oct 12 2022

WinMaw

0 Answers Avg Quality 2/10

Closely Related Answers

responsive media query

Comment

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}

Popularity 10/10 Helpfulness 10/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jan 18 2023

Bade_Mia

0 Answers Avg Quality 2/10

responsive media qurries

Comment

-2

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}

Popularity 10/10 Helpfulness 8/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on May 24 2022

Hamza Najam

0 Answers Avg Quality 2/10

responsive media queries

Comment

/* CSS code for responsive media queries */
/* Styles for devices with a maximum width of 767px */
@media (max-width: 767px) {
  /* Add your styles for smaller devices here */
  /* Example */
  body {
    background-color: yellow;
  }
}

/* Styles for devices with a width between 768px and 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Add your styles for medium-sized devices here */
  /* Example */
  body {
    background-color: orange;
  }
}

/* Styles for devices with a minimum width of 1024px */
@media (min-width: 1024px) {
  /* Add your styles for larger devices here */
  /* Example */
  body {
    background-color: pink;
  }
}

/* Additional media queries can be added for different device dimensions */

Popularity 9/10 Helpfulness 3/10 Language css

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Responsive Web Design - Media Queries

Comment

/* 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%;
  }
}

Popularity 10/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on May 21 2022

naly moslih

0 Answers Avg Quality 2/10

media query for responsive website

Contents

More Related Answers

media query for responsive website

Closely Related Answers

responsive media query

responsive media qurries

responsive media queries

Responsive Web Design - Media Queries

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.