Media Query
3 posts
Page 1 of 1
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.
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
css code<!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>
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){
}
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:
So, for example, if in your CSS code your links usually look like this:
Code: Select all
And you want them to look red on screens less than 919 pixels in width, you would do this:a {
color: blue;
}
Code: Select all
@media screen and (max-width:919px){
a {
color: red;
}
}
3 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023