Hey there, I'm in the final stages of completing my website but I'm encountering a slight issue with the columns not displaying at 100% on mobile devices. I've included the CSS below, but for some reason, the max-width of 320px isn't causing the column to go full width on mobile.
Feel free to visit the site to see the problem firsthand:
I'm sure it's an easy fix...any help would be greatly appreciated!
@media(max-width : 320px){
.column.half { width: 100%;}
}
/* Column sizes */
@media (min-width: 40rem)
.column {
float:left;
padding-left:1em ;
padding-right:1em;
}
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%;}
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.flow-opposite { float: right; }
/* Column sizes end */
/* Medium screens (640px) */
@media (min-width: 40rem) {
html { font-size: 112%; }
.third { float:left; display:inline;}
.half { float:left; display:inline;}
.two-thirds { float:left; display:inline;}
.image { border-style: double; border-color:white;}
}
/* Large screens (1024px) */
@media (min-width: 64rem) {
html { font-size: 120%; }
}