Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Aris Constantinou
2,687 PointsHaving trouble positioning elements in responsive 798px
Hi,
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
rydavim
18,814 PointsI'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.
Using the breakpoints you've got in your code now, you could try something like...
@media screen and (min-width: 798px) and (max-device-width: 1289px) {
/* Tablet styles would go here. */
}
Let me know if that helps. Happy coding!