CSS Reponsive Shows on Full Screen

Question

ashley9210_1 0 Newbie Poster

10 Years Ago

I have this css code and it mucks up from the services section and shows the mobile view on the desktop. Any help?

Many thanks.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

*{
    margin:             0px;
    padding:            0px;
}

body{
    margin:             0px;
    padding:            0px;
    background-color:   #333333;
    margin-left:        auto;
    margin-right:       auto;
}

#content{
    margin-left:        auto;
    margin-right:       auto;
    width:              920px;
}

#clear{
    height:             200px;
}

/* --- Top Section --- */

#top-section{
    background-image:   url('images/background.jpg');
    width:              920px;
    height:             500px;
}

#top-section img{
    display:            block;
    margin-left:        auto;
    margin-right:       auto;
    padding:            20px;
}

#nav{
    width:              750px;
    height:             100%;
    margin-left:        auto;
    margin-right:       auto;
    padding-top:        0px;
}

#nav ul li{
    display:            inline;
    width:              100px;
    padding:            20px;
    text-align:         center;
    border:             2px solid #fff;
    margin:             21px;
    float:              left;
}

#nav ul li a{
    list-style-type:    none;
    list-style:         none;
    font-family:        'Open Sans', sans-serif;
    font-size:          1.5em;
    color:              #fff;
    text-decoration:    none;
}

/* --- About Section --- */

#about-section{
    width:              920px;
    height:             500px;
    background-image:   url('images/about-bg.png');
}

#heading{
    width:              920px;
    height:             100px;
    text-align:         center;
    background-color:   #333;
}

#heading h1{
    font-family:        'Open Sans', sans-serif;
    font-size:          4em;
    padding-top:        10px;
    color:              #fff;
}

#about-text{
    width:              860px;
    height:             200px;
    background-color:   #333;
    padding:            30px;
    color:              #fff;
    font-size:          14px;
    text-align:         justify;
}

/* --- Services Section */
#services-section{
    background-color:   #d85252;
    width:              920px;
    height:             600px;
}

#services-section h1{
    font-family:        'Open Sans', sans-serif;
    font-size:          4em;
    padding-top:        10px;
    color:              #fff;
    text-align:         center;
}

#services-section h2{
    font-family:        'Open Sans', sans-serif;
    font-size:          2em;
    color:              #fff;
    padding:            7px 42px;
}

#services{
    width:              920px;
    margin-right:       auto;
    margin-left:        auto;
    padding:            20px;

}

#service-box{
    width:              240px;
    padding:            0 0 0 45px;
    height:             auto;
    display:            inline;
    float:              left;
}

#service-box img{
    padding:            0 0 15px 50px;
}

#service-box p{
    width:              220px;
    text-align:         justify;
    font-size:          12px;
    color:              #fff;
}

#read-more{
    width:              auto;
    height:             auto;
    margin-left:        -23px;
    padding:            10px;
}

/* --- Clients Section --- */

#clients-section{
    width:              920px;
    height:             500px;
    background-color:   #333;
}

h1{
    font-family:        'Open Sans', sans-serif;
    font-size:          4em;
    padding-top:        10px;
    color:              #fff;
    text-align:         center;
}

h4{
    font-family:        'Open Sans', sans-serif;
    font-size:          1.25em;
    color:              #fff;
    text-align:         center;
}

#clients-container{
    width:              900px;
    padding:            10px;
}

#clients-box{
    width:              240px;
    height:             220px;
    padding:            18px;
    display:            inline;
}

/* --- Contact Section --- */

#contact-section{
    width:              920px;
    height:             auto;
    background-color:   #d85252;
}



/* --- Contact Form --- */
form{
    width:              840px;
    margin-left:        auto;
    margin-right:       auto;
    padding:            20px;
}

input, textarea {   
    padding:            9px;  
    border:             solid 1px #E5E5E5;  
    outline:            0;  
    font:               normal 13px/100% Verdana, Tahoma, sans-serif;  
    width:              250px;   
    }  

textarea {   
    width:              500px;  
    max-width:          500px;
    height:             130px;  
    max-height:         150px;
    }  

input:hover, textarea:hover,  
input:focus, textarea:focus {   
    border-color:       #C9C9C9;   
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;  
    }  

.form label {   
    margin-left:        0px;   
    color:              #999999;   
    }  

.submit input {  
    width:              auto;  
    padding:            9px 15px;  
    border:             3px #fff;  
    font-size:          14px;  
    color:              #333;  
    }

.form p{
    padding:            10px;
}

#text-area{
       float:           left;
}


@media screen and (min-width: 300px) and (max-width: 320px) {


#content{
        width:          320px;
    }

    #top-section{
    background-image:   url('images/bgsmall.png');
    width:              320px;
    height:             500px;
}

#top-section img{
    display:            block;
    padding:            20px;
}

#nav{
    width:              280px;
    height:             100%;
    margin-left:        auto;
    margin-right:       auto;
    padding-top:        0px;
}

#nav ul li{
    display:block;
    width:260px;
    padding: 0px;
    text-align: center;
    background-color: #fff;
    margin:1px;
    float:left;
}

#nav ul li a{
    list-style: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;
    color: #333;
    text-decoration: none;
}

/* --- About Section --- */
/* --- Responsive ---*/

#about-section{
    width: 320px;
    height: auto;
    background-image: url('images/about-small.png');
    background-repeat: no-repeat;
}

#heading{
    width: 320px;
    height: 50px;
    text-align: center;
    background-color: #333;
}


#about-text{
    width:          260px;
    height:         auto;
    padding:        auto;
    color:          #fff;
    font-size:      14px;
    text-align:     justify;
}

#clear{
    height:         118px;
}

#heading h1{
    font-size: 22px;
    position: absolute;
    text-align: center;
    color: #fff;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* --- Services Section */
#services-section{
    background-color:   #d85252;
    width:              320px;
    height:             1525px;
}

#services-section h1{
    font-size:          22px;
    position:           absolute;
    text-align:         center;
    color:              #fff;
    margin-left:        auto;
    margin-right:       auto;
}

#services-section h2{
    font-size:          22px;
    color:              #fff;
    margin-left:        auto;
    margin-right:       auto;
}
}

#services{
    width:              320px;
    margin-right:       auto;
    margin-left:        auto;
    padding:            auto;

}

#service-box{
    margin:             10px;
    padding:            10px;
    width:              280px;
    display:            block;
}

#service-box img{
    padding:            auto;
}

#service-box p{
    width:              220px;
    text-align:         justify;
    font-size:          12px;
    color:              #fff;
    padding:            auto;
}

#read-more{
    width:              auto;
    height:             auto;
    margin-left:        -23px;
    padding:            10px;
}

/* --- Clients Section --- */

#clients-section{
    width:              320px;
    height:             1000px;
    background-color:   #333;
}

h1{
    font-family:        'Open Sans', sans-serif;
    font-size:          2.5em;
    padding-top:        10px;
    color:              #fff;
    text-align:         center;
}

h4{
    font-family:        'Open Sans', sans-serif;
    font-size:          0.5em;
    color:              #fff;
    text-align:         center;
}

#clients-container{
    width:              300px;
    padding:            10px;
}

#clients-box{
    width:              240px;
    height:             220px;
    padding:            18px;
}

/* --- Contact Section --- */

#contact-section{
    width:            320px;
    height:           auto;
    background-color: #d85252;
}



/* --- Contact Form --- */
form{
    width: 280px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

input, textarea {   
    padding: 9px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 13px/100% Verdana, Tahoma, sans-serif;  
    width: 250px;   
    }  

textarea {   
    width: 250px;  
    max-width: 500px;
    height: 130px;  
    max-height: 150px;
    }  

input:hover, textarea:hover,  
input:focus, textarea:focus {   
    border-color: #C9C9C9;   

    }  

.form label {   
    margin-left: 10px;   
    color: #999999;   
    }  

.submit input {  
    width: auto;  
    padding: 9px 15px;  
    border: 3px #fff;  
    font-size: 14px;  
    color: #333;  
    }

.form p{
    padding: auto;
}


iframe{
    width: 320px;
}

}

css html5 mobile responsive web-design

4 Contributors
3 Replies
233 Views
2 Weeks Discussion Span
Latest Post 10 Years Ago Latest Post by sash_007

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

LastMitch · Answer 1 · 2013-11-04T05:35:04+00:00

I have this css code and it mucks up from the services section and shows the mobile view on the desktop. Any help?

@ashley9210_1

Then what was the issue?

Nutan_1 0 Newbie Poster · Answer 2 · 2013-11-14T14:23:39+00:00

Try using meta viewport tag under head section of your html document.

<meta name="viewport" content="width=device-width, user-scalable=no">

sash_007 3 Newbie Poster · Answer 3 · 2013-11-21T02:22:03+00:00

sash_007 3 Newbie Poster

10 Years Ago

check here