media query not changing class-CodePudding

Using Bootstrap5 and adding a separate stylesheet as the last stylesheet in the list, I am trying to style the margins of the class .content I have this code at the end of my stylesheet...

.content {
        width: 100vw;
        margin-top: 0;
        margin-bottom: 0;
        background-color: white;
        min-height: 80vh;
        padding: 0;
    }
@media only screen and (min-width: 768px) { 
.content {
        width: 70vw;
        margin-left: 15vw;
        margin-right: auto;
        margin-top: 15vh;
        margin-bottom: 15vh;
        background-color: white;
        min-height: 80vh;
        padding: 0;
    }
}

The web page uses <main utf-8"> <title>NC Commodities Conference of Soybeans, Corn, Small Grains, and Cotton Producers</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="style.css">

CodePudding user response：

You have to change min-width propety to max-width.

@media only screen and (max-width: 768px) { 
.content {
        width: 70vw;
        margin-left: 15vw;
        margin-right: auto;
        margin-top: 15vh;
        margin-bottom: 15vh;
        background-color: white;
        min-height: 80vh;
        padding: 0;
    }
}

This max-width propety means, is “If [device width] is greater than or equal to 768px(accordingy to the example), then do {…}”.

@media only screen and (min-width: 768px)

this min-width implies here as,“If [device width] is greater than or equal to 768px, then do {…}”

CodePudding user response：

Can you check your link tags at html file which you connect bootstrap.css and your.css to project?. You should link your.css at the end comparing the other css files.

     <link rel="stylesheet" href="bootstrap.css">
     <link rel="stylesheet" href="your.css">