I’m working on a responsive design for a project and I’m trying to target specific screen sizes using media queries. However, my current media query doesn’t seem to be capturing a screen size of 384×730 with a device pixel ratio of 2.
Here’s the CSS media query I’m currently using:
@media only screen
and (max-width: 375px)
and (max-height: 667px)
and (-webkit-device-pixel-ratio: 2) {
/* Add your styles here */
.home-container {
width:10% !important;
}
.hero-content {
align-self: unset !important; /* or initial */
}
.hero-action {
width: unset !important;
}
}
@media only screen
and (max-width: 414px)
and (max-height: 896px)
and (-webkit-device-pixel-ratio: 2) {
/* Add your styles here */
.home-container {
width:10% !important;
}
.hero-content {
align-self: unset !important; /* or initial */
}
.hero-action {
width: unset !important;
}
}
@media only screen
and (max-width: 384px)
and (max-height: 730px)
and (-webkit-device-pixel-ratio: 2) {
/* Add your styles here */
.home-container {
width:10% !important;
}
.hero-content {
align-self: unset !important; /* or initial */
}
.hero-action {
width: unset !important;
}
}
Issue:
This media query is not applying the styles to a device with a screen size of 384×730, but I was expecting it to. I believe the issue might be with the max-height, but I’m not entirely sure. I tried adjusting the max-height to 730px, but it still doesn’t seem to capture the screen.
My Goal:
I want this media query to apply to devices with a screen size of 384px width and 730px height with a device pixel ratio of 2.
4