/CSS/Change font size on large screen resolution bootstrap

Change font size on large screen resolution bootstrap

/* 
Extra small devices (portrait phones, less than 544px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
h1 {font-size:1rem;} /*1rem = 16px*/
/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {  
  h1 {font-size:1.5rem;} /*1rem = 16px*/
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  h1 {font-size:2rem;} /*1rem = 16px*/
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  h1 {font-size:2.5rem;} /*1rem = 16px*/
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  h1 {font-size:3rem;} /*1rem = 16px*/    
}
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/
 
/* Set width to make card deck cards 100% width */
@media (min-width: 950px) and (max-width:1100px) { 
  h1 {font-size:2.75rem;color:red;} 
}

-1

Similar codes

0 vote149 views1 answer
Overriding fullpage js anchor style
CSS
3 votes149 views3 answers
Remove box around button when clicked
CSS
0 vote147 views1 answer
Get ssl certificate command line
CSS
3 votes166 views1 answer
Watch scss to css
CSS
49 votes190 views5 answers
How to remove bullets from ul
CSS
17 votes150 views1 answer
Variables scss en calc()
CSS
35 votes231 views3 answers
What does class="d-none d-md-block" mean in bootstrap?
CSS Bootstrap
68 votes189 views6 answers
Center position absolute
CSS
2 votes165 views1 answer
How to make animation stay on 100%
CSS
0 vote152 views1 answer
Building Multi-Architecture Docker Images on ARM 64-bit
CSS