[Bookmonkey]

Hey Guys

I am trying to get my site to be 'responsive' and adjust to the screen resolution. You can see the site here

If anyone has any ideas or want to share some tips on how I can make it fit.

- On IPhones the Nav bar is not resizing, and my footer is also not resizing see here

If anyone can offer me some help. That would be great

[Lemur]

I'd make a separate site for the mobile version, normally a m.mydomain.com works fine.

As far as resolution, you have to use elastic units and measure your site by those standards. Measure your site vie percentage, it tends to be easier to figure things for. With that the entire site will dynamically resize as per the resolution.

[Bookmonkey]

How can i do this?

[revolutionx]

Instead of creating a separate subdomain, I would look at using CSS media queries.

Take a look at this tutorial: http://www.onextrapi...esign-template/

@media screen and (max-width: 478px) {
    h1 { font-size: 70px; padding: 1px; }
    h2 { font-size: 13px; padding: 1px; }
    body { font-size: 13px; }
}
 
@media screen and (max-width: 740px) {
    .left-col { width: 100%; }
    .sidebar { width: 100%; }
}
 
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

This is the important bit, if you resize your browser to be very thin, you'll notice that the sidebar will fall below the content and the text size will reduce. Which is what you probably want when you're browsing on a mobile device.

[Shane Hudson]

Lemur, he asked for responsive, not a mobile version.

I am currently using ZURB's Foundation template to make my site responsive, I don't usually use templates but it is the first responsive site I have made and the template helps a lot.

[Shane Hudson]

Lemur, he asked for responsive, not a mobile version.

I am currently using ZURB's Foundation template to make my site responsive, I don't usually use templates but it is the first responsive site I have made and the template helps a lot.

[Lemur]

@Shane Hudson

Bookmonkey, on 25 January 2012 - 11:40 PM, said:

On IPhones the Nav bar is not resizing, and my footer is also not resizing see here

...

Lemur said:

As far as resolution, you have to use elastic units and measure your site by those standards.

....what exactly now? I believe I did in fact cover those, or in the other case believed it was warranted.

[Bookmonkey]

I see both sides, Each have their merits, but I think ill go with the CSS3 Media Queries, that way I dont have to make an new version of the site. And It will be easier, although I might keep that template in my samples folder. Looks quite good. I have a querie though, how exactly does it work.. Do you place them in divs that scale down?

[Bookmonkey]

Hello? You still haven't offered anything that works, Have you looked at the code for my website?

[innuendoreplay]

Oh dude!, i try your site in the iphone website tester and is a disaster =S are you using a framework?

[Bookmonkey]

No im not using a framework.. I never have used a framework.

[Bookmonkey]

Should I be using a Framework @innuendoreplay

[innuendoreplay]

Not necessary but is a good way for mantain a responsive design for your site in the easy way; otherwise you need thread with all the platforms and it's a big problem. Check this

• Amazium Framework
  
• Less Framework

This post has been edited by innuendoreplay: 31 January 2012 - 04:29 PM

[Bookmonkey]

What one do you recommend using?

[innuendoreplay]

Bookmonkey, on 31 January 2012 - 09:11 PM, said:

What one do you recommend using?

less framework is a nice option,