Menu icon Foundation
Resolution responsivity, problem for mobiles

Hi I am problems with responsiveness of my site. Actually I don't know if this is an issue or it is supposed to work like that.
I have a form (or basically whole site) build on zurb. But when looking at the site in my phone (480x800) I see it like this

Wp ss 20140428 0002

It is good that the form adjusted itself, but it is still not what I want, because It is too small on the 4 inch screen (the form elements and the font and stuff are too small. I tried to set small-x values, but the best I get is this

Wp ss 20140428 0001

which makes it necessary to zoom site manually first. How do I do it so that it looks as big as on the second case after zoom automatically without any necessity to zoom? Imagine the problem on mobile devices with 4,6 inch screen and resolution 768 x 1024 and higher! The form won't even adjust itself and stays "as is". You can peek here: http://rezervace.aexpress.cz/ I have removed the effect you see on the second screenshot in order to make it more clear.

Do I do something wrong? Or do I just need to get used to the fact that sites for mobiles will never by responsive sufficiently?

I just add that this is my first project in ZF and I have decided not to use sass in order to get used to the ZF HTML and JS first.

Thank you for any help!

responsivenessmobilesmall

Hi I am problems with responsiveness of my site. Actually I don't know if this is an issue or it is supposed to work like that.
I have a form (or basically whole site) build on zurb. But when looking at the site in my phone (480x800) I see it like this

Wp ss 20140428 0002

It is good that the form adjusted itself, but it is still not what I want, because It is too small on the 4 inch screen (the form elements and the font and stuff are too small. I tried to set small-x values, but the best I get is this

Wp ss 20140428 0001

which makes it necessary to zoom site manually first. How do I do it so that it looks as big as on the second case after zoom automatically without any necessity to zoom? Imagine the problem on mobile devices with 4,6 inch screen and resolution 768 x 1024 and higher! The form won't even adjust itself and stays "as is". You can peek here: http://rezervace.aexpress.cz/ I have removed the effect you see on the second screenshot in order to make it more clear.

Do I do something wrong? Or do I just need to get used to the fact that sites for mobiles will never by responsive sufficiently?

I just add that this is my first project in ZF and I have decided not to use sass in order to get used to the ZF HTML and JS first.

Thank you for any help!

Chris over 5 years ago

Insert this meta tag in your head code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">