Menu icon Foundation
Media Queries Help! (Foundation 5)

Hello!

I'm having a slight problem with my media queries. I've enclosed my code below.

I've no problems with the properties under max-width: 40em (640px) but the ones for min-width: 40.063em (641px) and min-width: 40.063 and max-width: 64 em (1024),

I'm only feeling my way through media queries so I'd really appreciate the help! ;_;

/*MEDIA QUERIES*/
// Small screens
@media only screen and { 


==
} /* Define mobile styles */



@media only screen and (max-width: 40em) { 

.header{

    height: 380px;
	
}

.navigation-main li{

	font-size: 15px;
	padding-left: 10px;
	padding-right: 10px;
}	
/*aboutprev*/
div#aboutdis{

height: 300px;

}

div#mypic img{

display: none;

}

.aboutprev{

color: #331212;
height: 300px;
width: 100%;
background-color: #FAD089;

}

.intro{

height: 180px;
position: absolute;
top: 30%;
margin-top: -50px;
}
.bigtitle{

margin-top: 20px;
}
.carousel{
padding: 20px;

}

ul.clearing-thumbs {
display: block;
margin-left: auto;
margin-right: auto;
margin-left: 50px;
}



.link{

margin-left: -50px !important;
}

.link a{

margin-right: 20px;
}
.socialmedia ul img{

display: none;

}

footer{
height: 120px;
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

}


// Medium screens
@media only screen and (min-width: 40.063em) { 

body{
font-size: 10px;

}


ul.clearing-thumbs {
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;

{

.workss{
width: 50%;
margin: 0 auto;




} /* min-width 641px, medium screens */
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
.aboutprev{
background-color: #000;

}

.intro {
/* position: absolute; */
/* top: 50%; */
margin-top: -300px;
width: 300px;
float: right;
margin-right: 20px;


} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

}

            

         

/*STYLE.CSS*/

@font-face {
    font-family: 'museo_slab500';
    src: url('../fonts/museo_slab_500_2-webfont-webfont.eot');
    src: url('../fonts/museo_slab_500_2-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museo_slab_500_2-webfont-webfont.woff2') format('woff2'),
         url('../fonts/museo_slab_500_2-webfont-webfont.woff') format('woff'),
         url('../fonts/museo_slab_500_2-webfont-webfont.ttf') format('truetype'),
         url('../fonts/museo_slab_500_2-webfont-webfont.svg#museo_slab500') format('svg');
    font-weight: normal;
    font-style: normal;

}



*{

margin: 0;
padding: 0;

}

body{

font-size: 18px;
}
/*header*/
.header{
width: 100%;
height: 400px;
background-image: url('../img/bg-pattern.jpg');
background-repeat: repeat;

}

.logo{
padding-top: 30px;
padding-bottom: 30px;
display: block;

}

.logo img {
height: 232px;
width: 273px;
display: block;
margin: 0 auto;


}

/*navigation*/
.navigation-main{

text-align: center;

}
.navigation-main li{
transition: background-color 0.5s ease;
list-style: none;
display: inline-block;
padding-left: 20px;
padding-right: 20px;
font-family: 'museo_slab500';
font-weight: bold;
color: #FEEFEE;
font-size: 24px;
background-color: transparent;
}

.navigation-main li a{

color: #FEEFEE;


}
.navigation-main li:hover{

background-color: #F2634B;

}

/*aboutprev*/
div#aboutdis{

height: 400px;
}

div#mypic img{
height: auto;
max-width: 100%;
margin-top: 20px;



}

.aboutprev{

color: #331212;
height: 400px;
width: 100%;
background-color: #FAD089;

}

.intro{

height: 180px;
position: absolute;
top: 50%;
margin-top: -90px;

}

.hello{

font-family: 'museo_slab500';
font-weight: bold;
font-size: 20px;

}

.description{

font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;


}

.link{

font-family: 'museo_slab500';
font-weight: bold;
font-size: 20px;
text-decoration: underline;
text-align: right;
}

.link a{

color: #331212;

}



/*portfolioprev*/

.bigtitle{
margin-top: 20px;
font-size: 30px;
font-family: 'museo_slab500';
font-weight: bold;
color: #331212;
}

.workss{
background-color: #EFE6E6;
width: 100%;
padding-bottom: 20px;
padding-top: 20px;

}

div#inner{
height: 150px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #EFE6E6;

}

.carousel{

padding: 10px;

}

ul.clearing-thumbs {
display: block;
margin-right: auto;
margin-left: 50px;
/*width: 500px;*/

}

.clearing-caption {

background: transparent;

}
.clearing-assembled .clearing-container .visible-img {
background: rgba(0,0,0,0.4); !important;

}

.clearing-assembled.clearing-blackout {
background: rgba(0,0,0,0.4)!important;

}

ul.clearing-thumbs li {
/* width: 980px !important; */
/* margin: 0 auto !important; */
margin-bottom: 10px;

}
ul.clearing-thumbs {

}

a.th:hover {
-webkit-box-shadow: 0px 0px 0px 5px rgba(237,50,61,1);
-moz-box-shadow: 0px 0px 0px 5px rgba(237,50,61,1);
box-shadow: 0px 0px 0px 5px rgba(237,50,61,1);
}
a.th {
border: none;
transition: border-color 0.2 ease !important;
}

#link2{

text-align: right;


}

.portfoliolink{

font-family: 'museo_slab500';
font-weight: bold;
font-size: 20px;
text-decoration: underline;
text-align: right;
margin-right: 20px;
}

a.portfoliolink{

color: #422223;

}

/*footer*/

footer{

clear:both;
width: 100%;
height: 90px;
background-image: url('../img/bg-pattern.jpg');
background-repeat: repeat;
font-family: 'Open Sans', sans-serif;
color: #FEEFEE;
font-size: 12px;
}

footer p{


}

.socialmedia{
    text-align:right;
	margin-top: -10px;
}
.socialmedia ul li{

list-style: none;
display:inline;
}







            

         

media querieshtmlcssFoundation 5help

Hello!

I'm having a slight problem with my media queries. I've enclosed my code below.

I've no problems with the properties under max-width: 40em (640px) but the ones for min-width: 40.063em (641px) and min-width: 40.063 and max-width: 64 em (1024),

I'm only feeling my way through media queries so I'd really appreciate the help! ;_;

/*MEDIA QUERIES*/
// Small screens
@media only screen and { 


==
} /* Define mobile styles */



@media only screen and (max-width: 40em) { 

.header{

    height: 380px;
	
}

.navigation-main li{

	font-size: 15px;
	padding-left: 10px;
	padding-right: 10px;
}	
/*aboutprev*/
div#aboutdis{

height: 300px;

}

div#mypic img{

display: none;

}

.aboutprev{

color: #331212;
height: 300px;
width: 100%;
background-color: #FAD089;

}

.intro{

height: 180px;
position: absolute;
top: 30%;
margin-top: -50px;
}
.bigtitle{

margin-top: 20px;
}
.carousel{
padding: 20px;

}

ul.clearing-thumbs {
display: block;
margin-left: auto;
margin-right: auto;
margin-left: 50px;
}



.link{

margin-left: -50px !important;
}

.link a{

margin-right: 20px;
}
.socialmedia ul img{

display: none;

}

footer{
height: 120px;
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

}


// Medium screens
@media only screen and (min-width: 40.063em) { 

body{
font-size: 10px;

}


ul.clearing-thumbs {
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;

{

.workss{
width: 50%;
margin: 0 auto;




} /* min-width 641px, medium screens */
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
.aboutprev{
background-color: #000;

}

.intro {
/* position: absolute; */
/* top: 50%; */
margin-top: -300px;
width: 300px;
float: right;
margin-right: 20px;


} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

}

            

         

/*STYLE.CSS*/

@font-face {
    font-family: 'museo_slab500';
    src: url('../fonts/museo_slab_500_2-webfont-webfont.eot');
    src: url('../fonts/museo_slab_500_2-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museo_slab_500_2-webfont-webfont.woff2') format('woff2'),
         url('../fonts/museo_slab_500_2-webfont-webfont.woff') format('woff'),
         url('../fonts/museo_slab_500_2-webfont-webfont.ttf') format('truetype'),
         url('../fonts/museo_slab_500_2-webfont-webfont.svg#museo_slab500') format('svg');
    font-weight: normal;
    font-style: normal;

}



*{

margin: 0;
padding: 0;

}

body{

font-size: 18px;
}
/*header*/
.header{
width: 100%;
height: 400px;
background-image: url('../img/bg-pattern.jpg');
background-repeat: repeat;

}

.logo{
padding-top: 30px;
padding-bottom: 30px;
display: block;

}

.logo img {
height: 232px;
width: 273px;
display: block;
margin: 0 auto;


}

/*navigation*/
.navigation-main{

text-align: center;

}
.navigation-main li{
transition: background-color 0.5s ease;
list-style: none;
display: inline-block;
padding-left: 20px;
padding-right: 20px;
font-family: 'museo_slab500';
font-weight: bold;
color: #FEEFEE;
font-size: 24px;
background-color: transparent;
}

.navigation-main li a{

color: #FEEFEE;


}
.navigation-main li:hover{

background-color: #F2634B;

}

/*aboutprev*/
div#aboutdis{

height: 400px;
}

div#mypic img{
height: auto;
max-width: 100%;
margin-top: 20px;



}

.aboutprev{

color: #331212;
height: 400px;
width: 100%;
background-color: #FAD089;

}

.intro{

height: 180px;
position: absolute;
top: 50%;
margin-top: -90px;

}

.hello{

font-family: 'museo_slab500';
font-weight: bold;
font-size: 20px;

}

.description{

font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;


}

.link{

font-family: 'museo_slab500';
font-weight: bold;
font-size: 20px;
text-decoration: underline;
text-align: right;
}

.link a{

color: #331212;

}



/*portfolioprev*/

.bigtitle{
margin-top: 20px;
font-size: 30px;
font-family: 'museo_slab500';
font-weight: bold;
color: #331212;
}

.workss{
background-color: #EFE6E6;
width: 100%;
padding-bottom: 20px;
padding-top: 20px;

}

div#inner{
height: 150px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #EFE6E6;

}

.carousel{

padding: 10px;

}

ul.clearing-thumbs {
display: block;
margin-right: auto;
margin-left: 50px;
/*width: 500px;*/

}

.clearing-caption {

background: transparent;

}
.clearing-assembled .clearing-container .visible-img {
background: rgba(0,0,0,0.4); !important;

}

.clearing-assembled.clearing-blackout {
background: rgba(0,0,0,0.4)!important;

}

ul.clearing-thumbs li {
/* width: 980px !important; */
/* margin: 0 auto !important; */
margin-bottom: 10px;

}
ul.clearing-thumbs {

}

a.th:hover {
-webkit-box-shadow: 0px 0px 0px 5px rgba(237,50,61,1);
-moz-box-shadow: 0px 0px 0px 5px rgba(237,50,61,1);
box-shadow: 0px 0px 0px 5px rgba(237,50,61,1);
}
a.th {
border: none;
transition: border-color 0.2 ease !important;
}

#link2{

text-align: right;


}

.portfoliolink{

font-family: 'museo_slab500';
font-weight: bold;
font-size: 20px;
text-decoration: underline;
text-align: right;
margin-right: 20px;
}

a.portfoliolink{

color: #422223;

}

/*footer*/

footer{

clear:both;
width: 100%;
height: 90px;
background-image: url('../img/bg-pattern.jpg');
background-repeat: repeat;
font-family: 'Open Sans', sans-serif;
color: #FEEFEE;
font-size: 12px;
}

footer p{


}

.socialmedia{
    text-align:right;
	margin-top: -10px;
}
.socialmedia ul li{

list-style: none;
display:inline;
}







            

         
Chris M over 4 years ago

Hey Kata,

I think the problem is with your first media query,

@media only screen and { 


==
} /* Define mobile styles */

You're saying screen and... nothing, so it's not going to compile right. Remove that section and see if you still have errors?

Kata Alamon over 4 years ago

Hello Chris!

Thank you for the reply! Unfortunately I'm still experiencing the same problem :(

Kata Alamon over 4 years ago

media queries for a 640 (max) screen is the only thing that works. Can't seem to fix for 641 - 1024 px screen size. :((