CODEWITHSUNDEEP
htmlcssmedia-queries
ImNotPsychotic
ImNotPsychotic

Reputation: 45

@media not changing anything when max width is smaller?

Im trying to make a responsive header that changes font size for multiple different sizes of devices, but when using the @Media screen and (max-width: X px), it wont do any changes that i apply with it. My code

@media screen and (max-width: 690px)
{
    .container
    {
        width: 100%;
    }
    #header
    {
        width: 100%;
        right: 0%;
    }
	#header h1
	{
		display: none;
	}
    #nav a 
	{
    float: none;
    display: block;
    text-align: center;
  	}
  #nav-right 
	{
    float: none;
  	}
  #nav:before 
	{
    display: block;
    position: absolute;
    top: 10px;
	right: 0%;
    line-height: 40px;
    font-size: 21px;
    cursor: pointer;
	}
	#nav:after
	{
	position: absolute;
  	right: 0;
  	top: -15px;
 	height: 60px;
	}
}
@media screen and (max-width: 509px)
{
	#nav
	{
		font-size: 16px; 
	}
}

@media screen and (max-width: 409px)
{
	#nav
	{
		font-size: 8px;
	}
}

I just want it to change the font size, but its not working for what ever reason, please help Thank you W.

Upvotes: 1

Views: 814

Answers (3)

MSD
MSD

Reputation: 46

Here is a solution for your problem to apply media query when screen size changes. I have written a sample of code just to explain the format of applying media query for different screen sizes:

  body {
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
     }

     .footer_class{
        position: fixed;
        bottom: 0;
        background: #dfdfec;
        width: 100%;
        text-align: center;
     }

     .header_class {
        position: fixed;
        top: 0;
        background: #dfdfec;
        width: 100%;
        text-align: center;
     }

    /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

    /* Portrait and Landscape */
    @media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) {

        .title {
           font-size:14px;
        }

    }

    /* ----------- iPhone 6, 6S, 7 and 8 ----------- */

    /* Portrait and Landscape */
    @media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) { 

        .title {
           font-size:20px;
        }

    }
<DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
<body>
    <Header class="header_class">
     <h1 class="title">Header Section</h1>
    </Header>
    <article>
       <p>Content Section</p>
    </article>

    <footer class="footer_class">
       <h1 class="title">Footer Section</h1> 
    </footer>
</body>
</html>

let's break down your media query to two parts: @media only screen This means we will apply css styles to a device with a screen. The keyword only used here to hide style sheets from older browsers from seeing phone style sheet.

and (min-device-width: 320px) and (max-device-width: 568px) This is quite obvious since it means that the specified css only applied when a device has a screen's size with minimum 320px and maximum of 480px in width dimension.

I hope this helps you to solve your problem.

Upvotes: 1

Gurmatpal
Gurmatpal

Reputation: 134

have you added the viewport in your html file? if not then add viewport in head tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Upvotes: 1

Carol McKay
Carol McKay

Reputation: 2424

It needs to know where one starts and the other ends - this is done by one pixel for smooth responsive layout I usually find it easier to work from the low size up as the low size starts at zero pixels wide so no min-width needs to be mentioned.

I'm going to reorder your media queries narrow to wide screen:

@media screen and (max-width: 409px)
{
	#nav
	{
		font-size: 8px;
	}
}
   
/* now I'm going to put a min width on this so that it knows it's range does NOT start at zero and won't clash with the previous media query */

/* notice this is 1px bigger than the previous max-width */

@media screen and (min-width: 410px) and (max-width: 509px)
{
	#nav
	{
		font-size: 16px; 
	}
}

/* now I'm going to put a min width on this so that it knows it's where it's range does NOT start at zero and won't clash with the previous media queries */

/* notice this is 1px bigger than the previous max-width */

 @media screen and (min-width: 510px) and (max-width: 690px)
{
    .container
    {
        width: 100%;
    }
    #header
    {
        width: 100%;
        right: 0%;
    }
	#header h1
	{
		display: none;
	}
    #nav a 
	{
    float: none;
    display: block;
    text-align: center;
  	}
  #nav-right 
	{
    float: none;
  	}
  #nav:before 
	{
    display: block;
    position: absolute;
    top: 10px;
	right: 0%;
    line-height: 40px;
    font-size: 21px;
    cursor: pointer;
	}
	#nav:after
	{
	position: absolute;
  	right: 0;
  	top: -15px;
 	height: 60px;
	}
}

/* and there you have it */

Upvotes: 1

Related Questions