Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Tan 5 posts 25 karma points
    Jul 28, 2015 @ 08:37
    Tan
    0

    How to display the content of website by mobile?

    My website is good for PC but not mobile. In don't understand why it is. Please help me Thank you very much for any help.

    my website: http://tttt.haugiang.gov.vn

  • Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib
    Jul 28, 2015 @ 11:55
  • Tan 5 posts 25 karma points
    Jul 29, 2015 @ 01:16
    Tan
    0

    Thank Alex very much, but I added the viewport as you recommend and it is not still displayed although it is only displayed during quick loading process

  • Casper Andersen 126 posts 508 karma points
    Jul 29, 2015 @ 11:11
    Casper Andersen
    0

    Let my try and explain to you how a responsive site works.

    The sites content is always the same on mobile and desktop, unless ofcourse you decide to hide things.

    But what you are looking for is something called media queries. The Viewport you added only makes sure that the site views the sizes correctly and scales properly. BUT you have to tell it how to scale. Let me give you an example

    <div id="main">
        <p>hello</p>
    </div>
    <div id="sidebar">
        <p>hello from sidebar</p>
    </div>
    

    this is a basic example of a main content area and a side bar now normally you could have some style like this

    <style>
    #main
    {
    float:left;
    width:75%;
    }
    
    #sidebar
    {
    float:left;
    width:25%;
    }
    </style>
    

    I hope this makes sense

    now what you want to do is tell the browser that when you get to for an exampl under 768px you want the sidebar and the main to be 100%

    and this is done like this

    <style>
        #main
        {
        float:left;
        width:75%;
        }
    
        #sidebar
        {
        float:left;
        width:25%;
        }
    
    @media (max-width:768px)
    {
    #main
        {
        float:left;
        width:100%;
        }
    
        #sidebar
        {
        float:left;
        width:100%;
        }
    }
        </style>
    

    what this means is that from 0px to 768px your main and sidebar will both be 100% width

    Hope this helps

  • Jonas Nikolajsen 17 posts 103 karma points
    Jul 29, 2015 @ 11:17
Please Sign in or register to post replies

Write your reply to:

Draft