Grow your CSS skills. Land your dream job.

Responsive Web Design, Not Responding :S

  • # June 4, 2012 at 2:18 pm

    Hello,

    I have been trying to get my new site template to adapt to mobile devices. So far it works when I resize the browser window. Problem is it doesn’t work on mobile devices. It displays as a regular web page.

    Here is the web page: http://opelm.com/test/

    If anyone can offer me a solution, and even suggestions as to what I must add to my site in terms of CSS that would be helpful.

    I’m new to this whole responsive design thing.

    Thanks!

    # June 4, 2012 at 2:35 pm

    It’s working in iOS. What mobile device are you using?

    # June 4, 2012 at 2:41 pm

    I tried on my friends iPhone4 and on his Android phone. To be honest I don’t have a smartphone myself Lol so testing is a pain.

    # June 4, 2012 at 3:15 pm

    I’m not sure if you are using media queries to specify css rules for your different devices/screen sizes, but for an iphone for you would need to use this media query, and put your iphone/phone css rules inside this query

    /* iPhone 4


    */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */

    }

    Ryan

    # June 4, 2012 at 4:33 pm

    OpelM, you can test using iOS and many Android browsers at BrowserStack.com. Give them your email and you get something like 60 minutes of free testing and then you have to subscribe, but it should help you at least get started.

    # June 4, 2012 at 10:33 pm

    Try adding -webkit-text-size-adjust: none; to the @media for mobile phones.

    # June 5, 2012 at 12:11 am

    Thanks for the replies guys. I will try out your suggestions and post an update.

    @Caleb: I found a site which emulates mobile devices. Let me know what you think about it: http://www.mobilephoneemulator.com/

    # June 5, 2012 at 4:54 pm

    @opeim juuust a quick suggestion, your header image is a little small width wise….users with a res width higher than 1024 (which is ALOT of people!) are going to see it looking a little weird…

    Just a little nit picking, site looks nice other wise!

    # June 8, 2012 at 3:34 pm

    Hey guys is it possible to get screen caps of what my site looks like on your mobile phones. Unfortunately I don’t have a smart phone and can’t test out the site. I’ve tried various mobile phone emulators and they show different results.

    http://www.opelm.com/wptest/

    # June 11, 2012 at 5:21 am

    Hey Folks,

    Take a look at my company’s new responsive design website http://www.dronamobile.com, you would be able to push and pull the browser window to test the “responsiveness” of this website. When I reduce the width of the browser, everything just flows “under” the browser frame and is cut off, just like the web content. Do explore and share your feedback about it…

    TeamDeltecs

    # February 21, 2013 at 7:01 am

    Hi
    i did responsive web design for my office website but it showing me white space
    for right side and it working in when i re size browser . but it not working samsung note 2

    # February 21, 2013 at 7:18 am

    @shivu Please start a new topic for your problem

    It would also be helpful if you would provide a link.

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

The topic ‘Responsive Web Design, Not Responding :S’ is closed to new replies.

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