August 15, 2013
Make ids responsive
Phil Kurtis’s Question:
I’m having a problem on a website I’m building for myself.
I want the icons to be responsive to the browser size. For now, I have the CSS set so for each icon, the left is set at a certain percent e.g.
For one icon, the html is:
<a id="mail" class="social" href="mailto:nishadt15@gmail.com"></a>
The CSS for #mail and .social is:
.social {
position: absolute;
top: 95%;
height: 40px;
width: 45px;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #3db48b;
cursor: pointer;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#mail {
left: 39%;
background: url(../img/mail.png) no-repeat center center;
background-size: 40px 40px;
}
Obviously setting left to a percent is a bad idea because the icons will start to overlap while trying to maintain the percent. Is there a way to remedy this with a different method?
You can make the icons responsive using CSS media queries: You can even assign different images not only change the position:
Example:
@media (max-width: 600px) {
/* Styles for devices with maximum of 600px width */
#mail {
left: 39%;
background: url(../img/mail.png) no-repeat center center;
background-size: 40px 40px;
}
}
@media (min-width: 600px) and (max-width: 1200px) {
/* Styles for devices with minimum of 600px width and up to 1200px in width */
#mail {
left: 20%;
background: url(../img/mail2.png) no-repeat center center;
background-size: 80px 80px;
}
}
