Can anyone provide some guidance on why these media queries are not working in Safari? I've tested them in Chrome and they work fine. Any help would be greatly appreciated as I'm new to coding.
@media screen and (max-width: 768px) {
#wellLogo {
height: 250px;
margin-top: 175px;
}
.home1 {
background-image: url("../assets/img/sanctuaryS.png");
}
@media screen and (max-width: 480px) {
.standardParallax {
background-attachment: scroll;
height: 175px;
}
#wellLogo {
height: 100px;
margin-top: 40px;
}
h1 {
font-size: 30px;
}
.mission {
display: block;
margin: 5px;
margin-left: auto;
margin-right: auto;
height: 70px;
width: 175px;
border-radius: 25px;
border: 5px solid rgba(107,84,71,.9);
}
h5 {
font-size: 20px;
}
#spanish {
margin-left: auto;
margin-right: auto;
}
#english {
margin-right: auto;
margin-left: auto;
}
#missionPadding {
padding-top: 0px;
}
#exchange {
margin-left: auto;
margin-right: auto;
padding-top: 0px;
}
#elements {
margin-left: auto;
margin-right: auto;
}
.margin1 {
margin-bottom: 5px;
}
.section {
height: 375px;
}
#section1 {
height: 400px;
}
.section2 {
height: 300px;
}
}