Multiple @meida Screens in base css of dawn theme

Store Design
, ,

Topic summary

A user is asking whether it’s possible to include multiple @media screen queries within the base.css file of the Dawn theme for different modifications.

Provided Code:

  • One @media query targets screens with a minimum width of 990px, adjusting the header grid layout (template areas, columns, and gap).
  • A second code block appears corrupted or reversed, containing CSS properties written backwards (e.g., “!important” as “tnatropmi!”) and references to video background elements.

Current Status:

  • The question remains unanswered with no responses or solutions provided.
  • The malformed code suggests a potential copy-paste error or encoding issue that needs correction before implementation.
Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

is there a way i can have the following @media screens in side my Base.css as they are for diffrent modifactions to the dawn theme.

@media screen and (min-width: 990px){
.header–middle-left {
grid-template-areas: ‘heading navigation icons’;
grid-template-columns: 1fr auto 1fr;
column-gap: 2rem;
}
}

@media screen and (max-width: 767px) {
.videoBackground .videoBox {
padding: 100px 10px 80px !important;
}
.videoBackground .fullscreen-video-wrap{
position: absolute !important;
z-index: 1 !important;

}
.videoBackground .videoBoxInfo .videoBoxInfoTitle {
padding: 10px !important;
font-size: 35px !important;
line-height: normal !important;
}
}