2

This may be an easy fix as I'm still just learning so apologies. But I am making a site responsive and I have it responsive for 1920 as the max width and it works perfectly. But then I add a media query to make the max width 768. Then it all goes wrong and upon page loading as the main body of my CSS gets replaced and not just what I have selected in my query so just as an example of a quick thing I threw up to test on.

@media screen and (max-width:768px){
    .herotriangle{
    content: url("../img/triangle.png");
    position: absolute;
    width: 1173px;
    height: 109%;
    bottom: -130px;
    display: none;
    right: -587px;
    transform: rotate(1deg);
}

@media screen and (max-width: 1920px){
    body{
    height: 4000px;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}

Now obviously you cant see the exact same code but trust me when I changed the triangle to display none in the 768 query it replaced the code in the main body of CSS what can I do to fix this!

Mark
  • 21
  • 2
  • 2
    Did you try to change the order? More info: https://stackoverflow.com/questions/8790321/why-does-the-order-of-media-queries-matter-in-css – Dima Vak May 30 '20 at 20:53

0 Answers0