Top GREPCC Earners Today

GutoTrosla 836

VasteMonde 663

florinrelea 367

Shadow 354

Charles-Alexandre Roy 346

Recent Popular Write-ups

sumer ahmed alkadasi on Jun 28, 2022

Moving MySQL from default folder to home folder or any disc space in Debian

Nadim AL ABDOU on Jun 22, 2022

How do JavaScript closures work?

A closure is a pairing of: A function and A reference to that function's outer scope (lexical en...

sumer ahmed alkadasi on Jun 19, 2022

Carousel - slider

This post show how you can create simple carousel using JavaScript.

Sound March on Jun 06, 2022

Tables for HTML (beginner lesson)

Here are some basic table structures and more for beginners lol.

Kshitij on May 27, 2022

Print zip object in python

The zip() function takes iterables (can be zero or more), aggregates them in a tuple, and returns...

All Languages >> CSS >> media query for mobile view css

“media query for mobile view css” Code Answer’s

media query for mobile view css

css by Collared Lizard on Dec 06 2019 Donate Comment

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

media query for mobile and tablet

whatever by Bloody Bee on May 13 2021 Comment

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
  /* Styles */
}

/* iPhone 4 - 5s ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
}

/* iPhone 6 ----------- */
@media
only screen and (max-device-width: 667px) 
only screen and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6+ ----------- */
@media
only screen and (min-device-width : 414px) 
only screen and (-webkit-device-pixel-ratio: 3) {
  /*** You've spent way too much on a phone ***/
}

/* Samsung Galaxy S7 Edge ----------- */
@media only screen
and (-webkit-min-device-pixel-ratio: 3),
and (min-resolution: 192dpi)and (max-width:640px) {
 /* Styles */
}

Source: stackoverflow.com

css media queries pc and mobile

css by Borma

on Jun 30 2021 Comment

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Source: stackoverflow.com

Add a Grepper Answer