can you check this mono-page Site, what not permits me re-size to tablet or phone screens I think used 100% widths…eg in browser resize windows of browser to resize/rearrange content… eg. firefox & chrome …
You have to be really careful when setting any widths on a responsive site. Also remember that padding/margin is added to width.
To help with the padding issue, you could add this to your CSS:
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
Other things are wrong, though. For example, look at your form inputs:
#country, input, textarea {
[COLOR="#FF0000"]width: 305px;[/COLOR]
}
Width settings like that are destroying your layout on narrow screens.
Hi,
In order for tablets/mobile devices to view your page without scaling it very small you need to use the viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
If you have a fluid width site and you don’t set the meta tag then devices like the iphone will assume it’s 980px wide and then just scale it smaller and smaller until it fits in the iphones viewport - leaving you with unreadable text. Once you set the meta tag the page will render the same as it would in your browser if you narrowed the window to a similar size i.e. the content just wraps but stays the same size as in the desktop version.
As Ralph said you would then need to adjust your fixed width elements (such as inputs) so that they can contract smaller. Usually you would wrap the input in a div that is positioned where you want and then set the input’s size size to 100% (using box-sizing as mentioned) so that it scales up and down with browser.
Alternatively use a media query at the point the layout becomes too cramped and change the width of the input to something smaller and maybe put the labels on top instead of at the side.
thks this helped…