Shawn.o Shawn.o - 7 months ago 22
HTML Question

media query image positioning problems

I'm trying to center a

img
when the viewport is 320px. I've tried using different method but nothing seems to work.



.logo {
width: 55px;
height: 55px;
margin: 10px 0 10px 30px;
float: left;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
header {
height: 300px;
}

.logo {
width: 55px;
height: 55px;
clear: both;
padding: 0;
margin: 0;
margin-left: 50%;
margin-right: -50%;
}
}

<header>
<img class="logo" src="img/logo.png" alt="">
<nav id="main_menu">
<ul class="menu">
<a href="index.html"><li>Home</li></a>
<a href="how-it-works.html"><li>How It Work</li></a>
<a href="learn-more.html"><li>Learn More</li></a>
<a href="feed.html"><li>Student Feed</li></a>
<a href="contact.html"><li>Contact Us</li></a>
</ul>
</nav>
</header>




Answer

Try to this if you want it in the middle of the screen :)

.logo{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

Othewise just remove top and bottom if you just want it horizontal.