CSS Media Query Question
Hi Guys, need help with media query. I input three media query on a site but only one works the last media query doesnt work.
@media screen and (max-width: 375px) {
.rowbutton {
flex-wrap: wrap!important;
}
.rowbutton .panel-grid-cell {
width: 100%!important;
margin-bottom: 10px;
}
}
@media screen and (min-width: 1280px) and (max-width:1366px) {
.rowbutton { padding: 0 10px !important; } .rowbutton .panel-grid-cell { width: calc(20% - ( 0.8 * 10px)) !important; ; } //Ipad Pro Media Querry for Portrait @media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) { .rowbutton { flex-wrap: wrap!important; } .rowbutton .panel-grid-cell } width: 48%!important; margin-bottom: 10px; } } Is there a way it will work for the 3 media query? Thanks
Hi there,
I am just following up on some of the old unanswered questions on the site.
It looks like there is a typo in your last media query, where the width property for the .rowbutton .panel-grid-cell element is not defined. This may be causing the media query to be ignored by the browser.
Here is the corrected media query, with the width property defined:
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) {
.rowbutton {
flex-wrap: wrap!important;
}
.rowbutton .panel-grid-cell {
width: 48%!important;
margin-bottom: 10px;
}
}
In general, it's a good idea to check for syntax errors in your media queries, as this can prevent them from being applied correctly. You can use a tool like a linter or a code editor with built-in syntax highlighting to help you identify and fix any errors in your media queries.