is there a problem with the media query in the CSS code?-CodePudding

hello guys i tried to use media query for the first time to make a simple section responsive where the font-size gets smaller when the screen is small

but for some reason it didn't work for me please if you see something that i dont infrom me

here is the HTML code that i use for the project

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>
EYD
    </title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
</head>


<body>
   
<main>
    <div class="mainco">
        <h1>
            welcome to <br><span>EYD</span>
        </h1>
        <h2>best web-developing service on the internet</h2>
        <div class="buttons">
            <p><a href="#">ORDER</a></p> 
            <p><a href="#">HOW IT WORKS</a></p>
        </div>    
    </div>
</main>
<!-- ******************************************************** -->

<section>

</section>

</body>
</html>

here is the CSS code that contains the media query targeting a h1 element in the page

CSS:

/*this is a universal selector to clear the padding and margin*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

/*-------------------------------------
main 
--------------------------------------*/


/*here is the style of the main as a section*/
main{
    background: url(code1.jpg) purple;
    background-repeat: no-repeat;
    background-size:cover ;
    width: 100%;
    height: 630px;
    color: white;
    font-family: "alternate gothic";
    padding: 20px 0 0 0;
    
}

/*the style of the main section's text block*/
.mainco{
    width: 40%;
    max-height: 70%;
    text-align: center;
    margin: 10% 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 800px){
    .mainco h1{
        font-size:20px;
    }
}


/*the style of the h1 of the text*/
.mainco  h1 {
    font-size: 60px;
}
.mainco h1 span{
    text-shadow: 3px 3px rgb(167, 119, 119); font-size: 75px;
}
/*the style of h2 of the text*/
main  h2{
    font-size: 50px;
}
.buttons{
    min-width: 400px;
}
/*the style of the two button's text containers*/
.buttons p{
    padding: 20px;
    background-color: brown;
    display: inline-block;
    margin: 60px 20px;
}
/*styling the button's text*/
.buttons a{
    text-decoration: none;
    color: white;
    display: block;
    width: 100%;
    height: 100%;
}

CodePudding user response：

Always put your media queries at the end of your CSS code. That will stop the the other h1 declarations from overriding your media query.

CodePudding user response：

the main problem with your CSS code is the order

Your declaration .mainco h1 overwrite previously declared media query so if you change your CSS to this, it will work.

your media query should be bellow your global CSS

/*here is the style of the main as a section*/
main{
    background: url(code1.jpg) purple;
    background-repeat: no-repeat;
    background-size:cover ;
    width: 100%;
    height: 630px;
    color: white;
    font-family: "alternate gothic";
    padding: 20px 0 0 0;
    
}

/*the style of the main section's text block*/
.mainco{
    width: 40%;
    max-height: 70%;
    text-align: center;
    margin: 10% 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 800px){
    .mainco h1{
        font-size:20px;
    }
}


/*the style of the h1 of the text*/
.mainco  h1 {
    font-size: 60px;
}
.mainco h1 span{
    text-shadow: 3px 3px rgb(167, 119, 119); font-size: 75px;
}
/*the style of h2 of the text*/
main  h2{
    font-size: 50px;
}
.buttons{
    min-width: 400px;
}
/*the style of the two button's text containers*/
.buttons p{
    padding: 20px;
    background-color: brown;
    display: inline-block;
    margin: 60px 20px;
}
/*styling the button's text*/
.buttons a{
    text-decoration: none;
    color: white;
    display: block;
    width: 100%;
    height: 100%;
}