I have this website www.lifeofaris.se/tree and on desktop view everything is fine but i cant figure out how to position my logo and text on the left in tablet dimension 798px. Whenever i move my elements on the tablet they will be moved also in desktop and i dont want that, can anyone help me? <!DOCTYPE html>
<html>
<head> <link rel="stylesheet" href="css/framework.css">
<link rel="stylesheet" href="css/responsive.css">
<link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>NK Electrical LTD</title>
</head>
<body> <header>
<div class="logo">
<img src="img/nklogo.png" alt="NK Logo">
</div>
<h1 class="name">ELECTRICAL LTD</h1>
<div class="box">
<div class="info">
<p class="fb">Follow us on <a href="http://facebook.com/nkelectricalltd"><img src="img/fb.png" alt="Facebook Logo" class="social-icon"></a></p>
<p class="emergency">Emergency-call-number:2222222</p>
</div>
</div>
<a id="i-nav" href="#"></a>
<nav>
<ul>
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="electrical.html">Elec. Installations</a></li>
<li><a href="lighting.html">Lighting</a></li>
<li><a href="appliances.html">Home Appliances</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="slider">
<a href="img/wormhole.jpg">
<img src="img/wormhole.jpg" alt="slider">
</a>
</div>
<section class="boxes">
<ul id="gallery">
<li>
<a href="img/electrical.png">
<img src="img/electrical.png" alt="">
<p>Electrical Installations</p>
</a>
</li>
<li>
<a href="img/lighting.png">
<img src="img/lighting.png" alt="">
<p>Lighting Decorations</p>
</a>
</li>
<li>
<a href="img/homeappliances1.png">
<img src="img/homeappliances1.png" alt="">
<p>Electrical Appliances</p>
</a>
</li>
<li>
<a href="img/homeappliances2.png">
<img src="img/homeappliances2.png" alt="">
<p>Kitchen Appliances</p>
</a>
</li>
</ul>
</section>
<section class="latest">
<h1>Our latest products</h1>
<ul id="galleryproducts">
<li>
<a href="img/1.jpg">
<img src="img/1.jpg" alt="">
</a>
</li>
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" alt="">
</a>
</li>
<li>
<a href="img/3.jpg">
<img src="img/3.jpg" alt="">
</a>
</li>
<li>
<a href="img/4.jpg">
<img src="img/4.jpg" alt="">
</a>
</li>
</ul>
</section>
</div>
<footer>
<p>© NK ELECTRICAL LTD 2016</p>
</footer>
</body>
</html>Framework.css/main *{ box-sizing: border-box;
margin:0;
padding: 0;
}
body{font-family: 'Electrolize', sans-serif;}
.container{max-width: 940px;
margin: 0 auto;
padding: 0 5%;
overflow: hidden;
}
a{text-decoration: none;}
header{margin: 0 0 1% 0;
padding: 5px 0 0 0;
width: 100%;
text-align: center;
}
.logo{text-align: center;padding:0;width:50%;margin:0 auto;}
.logo img{width:50%}
nav{display: none;
text-align: center;
padding: 1%;
background-color:
# 1c1c1c;
}
nav ul {list-style: none;
margin: 0% 2%;
}
nav li {background-color:
# 656565;margin:5% 0% 5% 0%;
display: block;
}
nav a {display: block;
color:white;
font-size:1.2em;
font-weight: 800;
padding: 5% 10%;
}
.slider{width:100%;padding: 0;margin: 0 auto;}gallery { display: inline-block;
margin: 0% -2.7% 0% -2.7%;
padding: 0;
list-style: none;
} gallery li { float: left;
width: 45%;
margin: 2.5%;
background-color: 1c1c1c; color: bdc3c7;} gallery li:nth-child(3n) {clear: left;}
gallery li a p { margin: 0;
padding: 6%;
font-size: 1.25em;
background-color: 483636; color: bdc3c7; text-align:center;
} gallery img{max-width: 100%; padding:10%;}
galleryproducts{display: inline-block;
margin:0;
padding:0;
list-style: none;
}
galleryproducts li{float:left;
width:30%;
margin:0 10% 2% 10%;
}
galleryproducts li:nth-child(3n) {clear: both;
}.logo img{width:100%;max-width:120px;}
.latest{clear:both;background-color: 1c1c1c;}.latest h1{color: white;font-size:1.5em;font-weight: 300;border-bottom: 3px solid white;margin-bottom: 5%;padding:2%;}
.latest img{max-width: 100%;} galleryproducts img{border:3px solid white;}.slider{clear:both;}
.slider img{max-width: 100%;}
footer{clear:both;text-align: center; margin-top:5%;padding:3.1%;background-color: 1c1c1c;}footer p{color:white;font-size:0.8em;font-weight: 900;}
.name{font-size: 1.3em;font-weight: 900;margin-bottom: 10%;text-align: center;}
.info{background-image: url(../img/image.png); text-align: center;color:white;}
.fb{font-size:1.3em;}
.fb img {width:8%;}
.emergency{font-size:1.3em;padding:5%;}
.show{margin-top:3%;display: block !important;} i-nav{cursor: pointer;
margin:0 auto;
margin-top:5%;
display: block;
text-align: center;
width:44px;
height:44px;
background-image: url("../img/ham.png");
background-repeat: no-repeat;
background-size: 100% 100%;}
Responsive.css @media screen and (min-width: 798px) { .container{max-width: 990px;}
.box{float:right;position: relative;}
.logo{clear: both;}
.logo img{width:100%; max-width:92px;}
# i-nav{ display: none;
}
nav{
clear: both;
display: block;
}
nav ul{
padding:0;
margin:0 auto;
}
nav li{
display: inline-block;
width:350px;
margin:1% 2% 1% 2%;
}
nav a{
font-size: 1.3em;
padding:10%;
}
.logo{float:left;width:500px;height:0;}
.name{clear: both;margin:0;height:0;}
.box{}
.info {background-image: url(../img/social.png);background-repeat: no-repeat; display: inline-block;width:529px;padding-top: 11%; padding-bottom: 11%;}
.fb img{width:15%;}
.fb, .emergency{position: absolute;top:36px;right:1px;}
.emergency{margin-top:3%;}
.slider{max-width: 85%;}
# gallery{max-width:100%;margin:0 auto;text-align: center;}
# gallery li{width:40%;margin-right:-20px;margin-left: 65px;}.boxes{margin-top: -1%}
.latest{max-width:85%;margin:0 auto;}
footer p{font-size: 1.2em;}
}@media screen and (min-width: 1290px){ header{width:1009px;margin:0 auto;}
.container{max-width:1344px;}
.logo img{float:left;width:400px;margin-top:2%;}
.name{float:left; margin-top: 6.5%;
margin-left: 9%;}
.info{ width:500px;float:right;margin:0 auto;}
.slider{max-width: 83.5%;}
nav a{padding: 20% 0% 18% 0%;
font-size: 1em;}
nav li{
display: inline-block;
margin:0% 0.9% 0% 0.1%;
padding:0;
width:15%;}
# gallery{text-align: center;}
# gallery li{margin-left:0;margin-right:0.9%;float:none;display:inline-block;width:20%;}
# gallery li:nth-child(1n) {margin-right:6.2px;margin-left:4.0px;}.latest{max-width: 83.4%;}
# galleryproducts li{float:none;width:18%;display: inline-block;margin:2.3%;}
# galleryproducts li:nth-child(1n) {margin-left:4%;}footer p{font-size: 1.2em;}
}1 Answer I'm not 100% clear on what you want it to look like on tablets, but you might try using max-device-width in a media query instead of max-width. That will evaluate the actual size of the screen, instead of the viewing area. This might help you specifically target tablets, depending on the resolutions. How do I create a responsive logo?An easy way to create a responsive logo is to set 100% width, auto height, and a max-width on the logo image – <img src="LOGO.PNG" style="width:100%; height:auto; max-width:300px;"> It’s that simple, but read on for more detailed examples and ideas! Here is the download link to the example code, so you don’t have to copy-paste everything. How to make an image responsive?Making an image fluid, or responsive, is actually pretty simple. When you upload an image to your website, it has a default width and height. You can change them both with CSS. To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. What is a marginThe margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer. This property has no effect on non- replaced inline elements, such as <span> or <code>. The margin-top property is specified as the keyword auto, or a <length>, or a <percentage>. Why is marginmargin-top:-50% because percentage-based margin values are calculated relative to the width of containing block In fact, the nature of document flow and element height calculation algorithms make it impossible to use margins for centering an element vertically inside its parent. How do I make an image responsive in a div?An image can be made responsive by using CSS and setting the width of the image to be a percentage of its parent container, rather than a fixed pixel value. This way, when the size of the parent container changes (e.g. due to different screen sizes), the size of the image will also change proportionally. How do I make the margin top responsive in CSS?To make margins responsive, use either relative units (e.g. % or em) or media queries, which allow you to define styles depending on the viewport size. This media query will apply the style rule only when the viewport's width is equal to or less than 768px. To make a <div> content responsive, you can follow these steps:. Use CSS media queries: Apply CSS media queries to define different styles for different screen sizes. ... . Set width and max-width: Instead of using fixed pixel widths, use percentage-based widths or max-width property on the <div> element.. How do I scale an image to fit a div in CSS?To resize an image to fit a div in CSS, use the 'background-size' property with the value 'cover' for the div's background-image. Alternatively, set the 'max-width: 100%' for the image to ensure it adjusts proportionally within the div. | 
