Media Queries are not working for different screens

Question

I have written media queries for 1200px. This is working fine for 1200px but as I am changing to 1250px it is not working. all the elements get disturbed.

@media only screen and (min-width: 1200px)
.sticky1 {
    position: absolute;
    margin-left: 58%;
    margin-top: 47%;
    width: 30%;
}
.growthp1 p {
    position: absolute;
    margin-left: -25%;
    font-size: 23px;
    margin-top: 45%;
}
}

<div class="row">
				<div class="col-md-6 col-sm-6 growthp1">
				  <p>The legal entity was incorporated.</p>
					<img src="images/growth/8.png" class="sticky1 img-fluid">
					<img src="images/growth/3.png" class="growthp1img img-fluid">
				</div>
					<div class="col-md-6 col-sm-6 col-xs-6">				
							</div>
</div>

Answer 1

if you are using position : absolute then top , left,right,bottom will work not margin-top, margin-left,margin-right,margin-right. kindly use top , left,right,bottom then working

@media only screen and (min-width: 1200px){
.sticky1 {
    position: absolute;
    left: 58%;
    top: 47%;
    width: 30%;
}
.growthp1 p {
    position: absolute;
    left: -25%;
    font-size: 23px;
    top: 45%;
}
}

<div class="row">
                <div class="col-md-6 col-sm-6 growthp1">
                  <p>The legal entity was incorporated.</p>
                    <img src="images/growth/8.png" class="sticky1 img-fluid">
                    <img src="images/growth/3.png" class="growthp1img img-fluid">
                </div>
                    <div class="col-md-6 col-sm-6 col-xs-6">                
                            </div>
</div>

check 1250px screen size are working on my device.

Answer 2

first of all I want to inform you that you missed the { first complete this and then follow the below code as per your requirement. you don't need to use:

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px)

this code just apply css between 1200px - 1599px and that not a good way for you, because this will require more media query need to apply in your code.

so u can use following method to apply media query to your page.

for using @media(min-width: value){}:

// First Priority
@media (min-width: 1200px){
    //your css code
}
// Second Priority
@media (min-width: 1250px){
    //your css code
}

this media query is work for the screen size 1200 & more than 1200.

for using @media(max-width: value){}:

// First Priority
@media (max-width: 1249px){
    //your css code
}
// Second Priority
@media (max-width: 1199px){
    //your css code
}

this media query is work for the screen size less than 1200.

try to understand the above logic and if you have any question you can ask me by commenting on this answer, I will replay you for your any doubts.

Thank You...

Answer 3

for Laptop

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
.sticky1 {
    position: absolute;
    margin-left: 58%;
    margin-top: 47%;
    width: 30%;
}
.growthp1 p {
    position: absolute;
    margin-left: -25%;
    font-size: 23px;
    margin-top: 45%;
}
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
.sticky1 {
    position: absolute;
    margin-left: 58%;
    margin-top: 47%;
    width: 30%;
}
.growthp1 p {
    position: absolute;
    margin-left: -25%;
    font-size: 23px;
    margin-top: 45%;
}
}

Answer 4

You missed that {

Css

@media only screen and (min-width: 1200px){
.sticky1 {
    position: absolute;
    margin-left: 58%;
    margin-top: 47%;
    width: 30%;
}
.growthp1 p {
    position: absolute;
    margin-left: -25%;
    font-size: 23px;
    margin-top: 45%;
}
}