My Omega 3 theme has the following layouts in the grid settings:
Narrow layout: all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)
Normal layout: all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)
Wide Layout: all and (min-width: 1220px)
I need to add some custom CSS within each media query. At the moment ive added them within my existing custom CSS file by copying the media query and adding an @import.
@media all and (max-width: 739px) {
//styles
}
@media all and (min-width: 740px) and (min-device-width: 740px),
(max-device-width: 800px) and (min-width: 740px) and (orientation:landscape) {
//styles
}
@media all and (min-width: 980px) and (min-device-width: 980px),
all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape) {
//styles
}
@media all and (min-width: 1220px) {
//styles
}
Is there a better practice way of doing this / what are the other ways? Is there a way that integrates with the theme more fully?