1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[Need Some HELP] My HTML website to responsive mobile website using only CSS/Viewport

Discussion in 'Web Design' started by francis1017, Apr 1, 2015.

  1. francis1017

    francis1017 Supreme Member

    Joined:
    Feb 26, 2013
    Messages:
    1,467
    Likes Received:
    341
    Hello Everyone!

    As the title says, I am really needing some help on my html single page websites.
    I paid someone on fiverr who can edit my site so it can pass the google mobile friendly checker and he did it.
    So I checked the codes that he added, a viewport and some codes on css.
    Used it on my other sites some worked in those sites that has same designs and won't work (from different designs).
    Though I tried my best to make it work but I can't. And I am broke right now so I can't pay someone :(

    Here are the codes:

    In the head section of the index.html:
    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    The codes that he added in the CSS:
    Code:
    @media (min-width: 320px ) and (max-width: 359px)
    {
        #head {
        background: url("img/head.png") no-repeat scroll center top / contain rgba(0, 0, 0, 0);
        height: 54px;
    }
    #content {
        padding: 0px !important;
        width: 100%;
    }
    }
    @media (min-width: 360px ) and (max-width: 479px)
    {
        #head {
        background: url("img/head.png") no-repeat scroll center top / contain rgba(0, 0, 0, 0);
        height: 61px;
    }
    }
    @media (min-width: 480px ) and (max-width: 639px)
    {
        
    #head {
        background: url("img/head.png") no-repeat scroll center top / 100% auto rgba(0, 0, 0, 0);
        height: 81px;
    }
    }
    @media (min-width: 640px ) and (max-width: 767px)
    {
        
    #head {
        background: url("img/head.png") no-repeat scroll center top / 100% auto rgba(0, 0, 0, 0);
        height: 108px;
    }
    }
    @media (min-width: 768px ) and (max-width: 799px)
    {
        #head {
        background: url("img/head.png") no-repeat scroll center top / 100% auto rgba(0, 0, 0, 0);
        height: 130px;
    }
    }
    @media (min-width: 800px ) and (max-width: 919px)
    {
        #head {
        background: url("img/head.png") no-repeat scroll center top / 100% auto rgba(0, 0, 0, 0);
        height: 135px;
    }
    }
    
    @media (min-width: 320px) and (max-width: 800px)
    {
        #content {
        padding: 0px !important;
        width: 100%;
    }
    #content img {
        height: auto;
        max-width: 100%;
    }
    ul.enlarge span {
        display: none !important;
    }
    #content iframe {
        width: 100% !important;
    }
    .container {
        width: 100% !important;
    }
    }
    
    
    I can understand a little of CSS and html codes.
    Please please please I need some help.
    Please PM me if someone wants to help. I'll give you my cpanel account info or anything you want.

    Thank you!
     
  2. francis1017

    francis1017 Supreme Member

    Joined:
    Feb 26, 2013
    Messages:
    1,467
    Likes Received:
    341
    Can someone please help me :(
     
  3. AdludumAndre

    AdludumAndre Registered Member

    Joined:
    Mar 21, 2015
    Messages:
    51
    Likes Received:
    8
    Occupation:
    CTO & Co-Founder of Adludum.com
    Location:
    Germany
    Home Page:
    It might would be helpful if you also post the URL to your website, then the people that are open to help you can check it out :)
     
  4. Hexiuss

    Hexiuss Junior Member

    Joined:
    Aug 18, 2010
    Messages:
    108
    Likes Received:
    15
    are you matching the code he gave you(CSS). To each new sites HTML? if your just copy pasting that's probably why.
     
  5. SamLewis

    SamLewis Regular Member

    Joined:
    Oct 25, 2012
    Messages:
    287
    Likes Received:
    83
    Paste your html also