Media Query

3 posts Page 1 of 1
Contributors
User avatar
Mark
VIP - Donator
VIP - Donator
Posts: 372
Joined: Mon Aug 17, 2009 10:35 pm

Media Query
Mark
Hello,

I was wondering if any of you guys could help me with my code I want it to change to fit the device using media query can anyone help me please this is the code.
Code: Select all
<!DOCTYPE html>
<html lang="en">

<html>
<head>
    <title>MBAPPZ.co.uk - OFFICIAL WEBSITE</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

    <div id='wrapper'>
    
        <div id='header'>
        
            <a href='./'><img src='/images/logo.png' alt='' /><img /></a>
        
        <div id='loginbox'>
            <table>
            <tr>
                <td>Username:</td>
                <td><input type='text' name='username'/></td>
                <td><a href="#">Register</a></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type='password' name='password'/></td>
                <td><input type='submit' name='loginbtn' value='login'/></td>
            </tr>
            </table>
        </div>
        
        </div>
    
        <div id='nav'>
        
            <a href='./'>Home</a>
            <a href='#'>Tutorials</a>
            <a href='#'>Downloads</a>
            <a href='#'>Contact Me</a>
        
        </div>
    
        <div id='content'>
       
        </div>
        
        <div id='footer'>
        
            Copyright 2015 <a href='./'>mbappz.co.uk</a>
        
        </div>
        
    </div>



</html>
css code
Code: Select all
*{
    font-family: Helvetica;
}

body{
    background-color: #414141;
}

#wrapper{
    width: 920px;
    background-color: #fff;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
}

#wrapper #header{
    height: 135px;
    background-image: url(/images/header.png); 
    background-repeat: no-repeat; 
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
}

#wrapper #header #loginbox{
    float:right;
    color: #fff;
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
}

#wrapper #nav{
    margin-top: 10px;
    background-image: url(/images/header.png);  
    background-repeat: no-repeat; 
    color: #fff; 
    padding-top:  5px;
    padding-bottom:  5px;
    border: 2px solid #000;
}

#wrapper #content{
    min-height: 200px;
    margin-top: 10px;
    margin-bottom: 10px;  
}

#wrapper #footer{
    border-top:  1px solid #000;
    padding-top: 5px; 
}

/* NAV LINKS */
#wrapper #nav a{
    color: #fff;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 6px; 
    padding-right: 10px;
    padding-left: 10px;       
}

#wrapper #nav a:hover{
    color: #000;
    background-color: #fff;
}

/* END NAV LINKS */ 

/* PRIMARY COLUMNS */

#wrapper #content #left{
    width: 600px;
    float: left;
}

#wrapper #content #right{
    width: 300px;
    float: right;
}

#wrapper #content #full{
    width: 900px;
}
 
/* END PRIMARY COLUMNS */



a{
    color: red;
    text-decoration: none;
}

a:hover{
    color: red;
    text-decoration: underline;
}

.clear{
    clear: both;
}

/* MEDIA STUFF */

@media screen and (max-width:919px){
   
}
http://www.mbappz.com
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: Media Query
comathi
Media queries act somewhat like CSS selectors, except that they can contain other CSS selectors inside. So when you specify a media query, what you're really saying is "do this if that", "that" being the screen size you're targetting.

So, for example, if in your CSS code your links usually look like this:
Code: Select all
a {
    color: blue;
}
And you want them to look red on screens less than 919 pixels in width, you would do this:
Code: Select all
@media screen and (max-width:919px){
   a {
        color: red;
    }
}
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Media Query
mikethedj4
This post should be in the CSS section.
3 posts Page 1 of 1
Return to “Help & Support”