Currently, I am using Sass with Bootstrap and facing some challenges when implementing different media queries. Despite most discussions revolving around CSS problems only, I am uncertain of the source of my issue and how to effectively address it. The styles for min-width: 1400px are functioning correctly, but those for smaller resolutions are not taking effect. It appears that they are being overridden by another @media-query. How can I prevent this from happening?
Incorporating Angular into my project along with Bootstrap4 and SASS, I have been utilizing the container-fluid class provided by Bootstrap. To ensure responsiveness across various devices, I am experimenting with @media-queries to maintain a consistent layout. Moreover, I have been utilizing Bootstrap classes like "col-md..." in order to achieve a responsive design.
With SASS lacking brackets {} and semicolons, there is some uncertainty regarding whether or not I might be unintentionally overriding existing styles with my current approach.
@import '../../sass/var'
@media (min-width: 1351px)
.upper
margin-left: 290px
.welcome
font-family: $font
color: $white
font-size: 30px
@media (max-width: 1350px)
.upper
margin-left: 100px
.welcome
font-family: $font
color: $white
While the desired results are successfully displayed on higher resolutions, sadly, the lower resolution settings remain unaffected by this method.