Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Responsive site not working in devices. But it looks fine in PC.

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 17, 2014 at 9:52 pm #160692
    Muhammed Fayiz
    Participant

    Hi,

    I just built a responsive site using basic media query.

    @media screen and (max-width: 960px) {

    }

    And also write codes for the screens (850, 480) using media query.

    It’s looks fine in browsers. When i reduce the size of browser, it’s works fine. But in devices. It’s not showing the responsiveness. I use a i frame – HTML for a pop up html5 animation.

    January 18, 2014 at 1:52 am #160697
    basement31
    Participant

    you’ll need something like this to tell the browser not to try and pretend its bigger than it actually is

    <meta name="viewport" content="width=device-width, minimum-scale=1.0">

    January 18, 2014 at 1:53 am #160698
    Cleancod
    Participant

    I think it’s because you have forgotten to use this “meta” code in the header of your webpage.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    January 18, 2014 at 2:20 am #160700
    Muhammed Fayiz
    Participant

    Nop…. I used it…

    Here is the code used in top

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/css3-mediaqueries.js"></script>
    <title>Pinnacle Cases</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />

    January 18, 2014 at 3:10 am #160702
    Cleancod
    Participant

    Hmm, can you maybe sent a link to your webpage, i think it would be easier to help you then? ;-)

    January 18, 2014 at 3:15 am #160703
    Muhammed Fayiz
    Participant

    Oh…I forgot it… here is the link

    Pinnacle Cases

    January 18, 2014 at 4:25 am #160705
    Cleancod
    Participant

    When i look in your code on the web page, i discover that you haven’t used
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    in the index file? ;)

    January 18, 2014 at 5:13 am #160706
    Muhammed Fayiz
    Participant

    Thanks man… Now it’s works.. Thanks a lot.

    January 18, 2014 at 6:09 am #160707
    Cleancod
    Participant

    No problem, we are here to help each other ;-)

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.