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.
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