CSS Media Queries with min-width and max-width Syntax

Let us look at how we write Media Queries with min-width and max-width . we know that Media queries are a popular  Technic for styling based on the screen size .here we are going to discuss the syntax of Media Queries with min-width and max-width

We have standard for max-width and min-width

@media only screen and (max-width : 1600px) {

.title-cl h4{ font-size:28px; }


@media only screen and (min-width : 578px) {

.title-cl h4{ font-size:16px; }



So how we are adding both  with min-width and max-width Media Queries


@media screen and (max-width: 1024px) and (min-width: 578px) {

.title-cl h4{ font-size:22px; }


Leave a Reply

Your email address will not be published. Required fields are marked *