@media Query not functioning-CodePudding

I've been searching for a solution for a couple of weeks now, trying out different variations of the same couple lines of code, here is the current solution, which does not work.

HTML file:

<link type="text/css" rel="stylesheet" href="public/stylesheet.css">

<meta name="viewport" content="width=device-width">

External linked CSS file:

.column{
background-color: #FFF;

padding-top: 0%;
padding-bottom: 10%;
 margin-top: 1.2%;
/*margin-bottom: 2%; */
margin-left: 37.5%;
margin-right: 2%;

width:25%;
text-align: center;
padding-bottom: 0%;

display: inline-block;


/* scalable HTML CSS*/
  
@media (min-width: 700px) {
.column {
background-color: #FFF;

padding-top: 0%;
padding-bottom: 10%;
 margin-top: 1.2%;
/*margin-bottom: 2%; */
margin-left: 1%;
margin-right: 1%;

width:98%;
text-align: center;
padding-bottom: 0%;

display: inline-block;
  }
}

For whatever reason, the column div does not grow to 100% width no matter what changes to the code I do. I've already checked for my meta tag, which is there, and I've tried using internal CSS, along with as many variations of my meta tag and @media query I could find.

CodePudding user response：

That first column class selector is not closed.Here's the correct code

.column{
background-color: #FFF;

padding-top: 0%;
padding-bottom: 10%;
 margin-top: 1.2%;
/*margin-bottom: 2%; */
margin-left: 37.5%;
margin-right: 2%;

width:25%;
text-align: center;
padding-bottom: 0%;

display: inline-block;
}

/* scalable HTML CSS*/
  
@media (min-width: 700px) {
.column {
background-color: #FFF;

padding-top: 0%;
padding-bottom: 10%;
 margin-top: 1.2%;
/*margin-bottom: 2%; */
margin-left: 1%;
margin-right: 1%;

width:98%;
text-align: center;
padding-bottom: 0%;

display: inline-block;
  }
}

Hope it helps again

CodePudding user response：

where you link the src file try to give ./ like the one below

<link rel="stylesheet" href="./public/styles.css">

if that doesn't work try max width instead of min-width in the media query.

EDIT:Try to give the width as 100% and not 98%

CodePudding user response：

You forgot to add a } ! Here, I fixed that error.

.column {
    background-color: #fff;
    padding-top: 0%;
    padding-bottom: 10%;
    margin-top: 1.2%;
    /*margin-bottom: 2%; */
    margin-left: 37.5%;
    margin-right: 2%;
    width: 25%;
    text-align: center;
    padding-bottom: 0%;
    display: inline-block;
}

/* scalable HTML CSS*/

@media (min-width: 700px) {
    .column {
        background-color: #fff;

        padding-top: 0%;
        padding-bottom: 10%;
        margin-top: 1.2%;
        /*margin-bottom: 2%; */
        margin-left: 1%;
        margin-right: 1%;

        width: 98%;
        text-align: center;
        padding-bottom: 0%;

        display: inline-block;
    }
}