Make ids responsive

Question 1

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?

Answer

Starx

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;
  }
}

Question 2

Question by Ruwantha

Ruwantha

I know that media queries are use to create responsive layouts. But My question is we can do the same thing using ” % “. So my question is then why media queries?

Answer

Answer by Starx

Starx

Defining layout using % help create a fluid layout, NOT RESPONSIVE layouts.

Media queries help you to define different style sets for different screen sizes.

Also with Media Queries, you don’t have to be limited to just heights and weights, you can control more than sizes.

Example below creates different background for different screen sizes:

@media only screen and (min-width: 320px) {
   body { 
      background: red;
   }
}

@media only screen and (min-width: 780px) {
   body { 
      background: blue;
   }
}

Can % do that?
No

Question 3

Question by MEM

MEM

On this website:

.php
.jquery
.yii based

We need to have two or more different infographic pictures, depending on the viewport width.

The client is picky about w3c validation
picturefill solution doesn’t validate
different images and not only different image version, should be served
for a lot of reasons background images are not a solution*
IE8 and up support

I can use either a server or client side version, no problem.

Reasons:

Background image technique does work, but those infographics are NOT background.
They should arrive server side.
Obviously, they need to adapt. (and background size… well…)
Even worst, we do have responsive tooltips image maps associated with those infographics.

Answer

Answer by Starx

Starx

If media queries is not what you want then use response.js, if done properly you can load <img>s too. Here is a example:

<-- Load lo-fi.png  when viewport is 0–480px wide or no-js. 
    Load medium.png when viewport is 481–1024px wide. 
    Load hi-fi.png  when viewport is 1025px+ wide. --> 

<img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example" />

Question 4

Question by Shruti Jakhete

Shruti Jakhete

I want to adapt a method to convert my fixed width website to handheld device friendly website. Could anybody please suggest which method would be the best. Considering it should not compromise the loading time of website. I believe Responsive Web Design should work but I from research I found responsive images used in responsive webdesign sometimes compromise the websie loading time.

Answer

Answer by Starx

Starx

I think it is wise to detect a mobile browser user agent string (server side) and display content accordingly.

If you are building using PHP, then check out this awesome script.

Usage is something like this:

if($isMobile){
   header('Location: http://m.youdomain.com/' . urlencode($_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']));
   exit();
}

Also check out the Switcher

Tag: responsive-design

Make ids responsive

Phil Kurtis’s Question:

Why use media queries ? The different to the %

Question by Ruwantha

Answer by Starx

How to deliver different Responsive Images?

Question by MEM

Answer by Starx

build website handheld device friendly

Question by Shruti Jakhete

Answer by Starx

Please fill the form - I will response as fast as I can!