Grow your CSS skills. Land your dream job.

Make my website mobile friendly

  • # November 30, 2012 at 4:58 am

    Hi i am trying to make my website mobile friendly. what changes i have to make with head tag ?

    can anyone suggest the right way. Remember i don’t have to write @media css only want to resize the page according to screen size.

    i have tried this but not working
    > meta name=”viewport” content=”width=device-width”

    # November 30, 2012 at 5:04 am

    Hi @matthewb

    > can anyone suggest the right way. Remember i don’t have to write @media css only want to resize the page according to screen size.

    I can’t really make sense of this, are you saying you don’t want to use @media?

    If that’s the case, you could just use percentages instead of fixed-pixels so it adapts to the size of the browser window.

    Something like this – http://codepen.io/Watson90/full/KupHs

    Using @media will give you so much better control at certain points though!

    # November 30, 2012 at 5:40 am

    ya don’t want to use @media css

    just have a look at “http://themeforest.net” in ur mobile it will resize according to mobile device.

    # November 30, 2012 at 5:49 am

    It’s not resizing at all on my Google Nexus.

    I think you’re getting confused with Theme Forest ‘resizing’ and Theme Forest just fitting on the screen because it’s contained within a wrapping div of some sort.

    Upon inspection of Theme Forest’s web page using Firefox and/or Chrome, you’ll they have a div with a class of container and it’s set at 984px, as opposed to the header, navigation bar, footer and sub-footer that is set to be as wide as the browser window itself (100%).

    # November 30, 2012 at 6:21 am

    @matthewb – I’m really not seeing why you don’t want to use @media queries. It’s the mainstay of responsive web design and one of the best methods for supporting mobile devices.

    Why are you against using @media?

    # November 30, 2012 at 6:50 am

    @andy_unleash @media is a amazing thing but the requirement is to just scale website according to device just that so i think only to do something with meta tags but unfortunately it is not working.

    # November 30, 2012 at 6:54 am

    The meta tag line (like the one you posted above) won’t change anything in terms of your physical design, that will have to be done using @media. But what it will do is force the browser on the mobile device to zoom in accordingly.

    # November 30, 2012 at 7:02 am

    The meta viewport is not for styling, it’s a signal to the browser/device what the scales should be and assists with media queries by helping determine the width of the device/browser in pixels is.

    If you want your website to respond to widths and changes then you will need media queries. Sure you dont absolutely need them and could have just everything percentage based. But if you get to small sizes and want to move your sidebar below the content (for example), you’d need a media query to achieve it.

    Edit: Check out MDN for details on the viewport tag – https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

    # November 30, 2012 at 9:19 am

    If you dont like @media which has no sense, may be you can try with some javascript library. jQuery Masonry is something that you may use, but I am not so sure if that is what you are looking for. To build your site on entirely liquid base is not very good decision.

    # November 30, 2012 at 11:45 am

    I believe matthewb is looking for this:

    # November 30, 2012 at 11:58 am

    Actually Drew., he isn’t. :-)

    # November 30, 2012 at 12:16 pm

    Well if he’s looking for a magic block of code that is going to make his site responsive, he’s SOL.

    # November 30, 2012 at 12:41 pm

    Yeah that’s what we’re trying to get across

    # December 27, 2012 at 8:29 am

    @DrewKerriganNY ya your code works LOL

    # December 31, 2012 at 11:06 am

    > @DrewKerriganNY ya your code works LOL

    Hah I’m glad that it worked for your @matthewb.

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

You must be logged in to reply to this topic.

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