Grow your CSS skills. Land your dream job.

Mobile Question

  • # January 13, 2013 at 5:24 am

    Hey there..

    I need help with this website : http://pierangelochifari.com/
    I build it to be friendly in all sizes so you can resize the width of the browser and see that everything works well..

    But when I’m checking on Mobile devices such as iPhone and Samsung Galaxy I don’t see it as I was planning.
    Please see that I’m resizing the width to be smaller until the navigation getting a black background
    that’s how i want it to be on the mobile devices…

    Any help how to build it right?

    # January 13, 2013 at 5:29 am

    Yo dawg nice site,

    You need to add the following into the <head></head> section of your site;

    You should also add this into the start of your CSS document;


    @-ms-viewport {
    width: device-width;
    }

    @viewport {
    width: device-width;
    }

    These basically tell the browsers that your site can downsize. Meta viewport works for iOS devices, whereas the @viewport/@-ms-viewport rules work for IE10 downsizing during snap mode.

    # January 13, 2013 at 6:41 am

    Thanks.. That’s exactly what i was needed : ) Bookmarked to my library codes

    # January 13, 2013 at 7:05 am

    Shameless plug, but I wrote an article about the viewport CSS settings and why you need them –> IE10 Responsive Design Fix

    # January 13, 2013 at 7:51 am

    I didn’t understand exactly what the problems with IE10? why do i need to use the css -ms-viewport code
    because it’s just working fine for me with the first code you gave, can you give more details?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".