SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    May 2013
    Posts
    128
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    can you check this mono-page Site, what not permits me re-size to tablet or phone scr

    droushiaagapimeni.org
    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 ...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    *, *: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:

    Code:
    #country, input, textarea {
    width: 305px;
    }
    Width settings like that are destroying your layout on narrow screens.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    In order for tablets/mobile devices to view your page without scaling it very small you need to use the viewport meta tag.

    Code:
        <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.

  4. #4
    SitePoint Zealot
    Join Date
    May 2013
    Posts
    128
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thks this helped...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •