CSS Reponsive Shows on Full Screen

Question

ashley9210_1 0 Newbie Poster

12 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;
}

}

html-css web-design

4 Contributors
3 Replies
244 Views
2 Weeks Discussion Span
Latest Post 12 Years Ago Latest Post by sash_007

Dani AI

Generated 8 Months Ago

Most likely cause: several of the “mobile” rules are not actually wrapped inside the @media block, so they sit later in the stylesheet and override the desktop rules for the rest of the page. That explains why the layout looks fine until the services section and then suddenly switches to the small-screen styles. The posted @media also uses a very narrow range (min-width: 300px and max-width: 320px), which is unusual and can make testing confusing. ’s note about the viewport is correct — the meta viewport belongs in the head — but the visible break here is almost certainly a CSS scoping/order problem.

Quick diagnostic steps

Open DevTools, inspect the element that flips (for example #services-section) and check the “Matched Rules / Computed” panel to see which rule sets the small width and what file/line it comes from.
Search the stylesheet for the @media opening and closing braces and use an editor with brace matching (or a CSS linter) to spot a prematurely closed block.
Watch for invalid declarations that get ignored (for example padding: auto is invalid and will be ignored) and for incomplete shorthand like border: 3px #fff; which needs a style (for example solid).

Practical fixes (apply and re-test)

Ensure every mobile override is inside a single, well-formed media block. Prefer a max-width query (and a practical breakpoint) rather than the min/max 300–320px range:

#content {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (max-width: 480px) {
  /* all mobile overrides here */
}

Move the closing } so it actually closes the @media after all mobile rules; delete any stray extra }. Fix invalid declarations (e.g. use padding: 20px or padding: 0, and border: 3px solid #fff).

Other useful refinements

Use more specific selectors for section headings (avoid redefining global h1 later in the file).
In mobile rules remove floats (use float: none) and use block-level layout for nav items.
After fixing CSS order, confirm the meta viewport is present (as suggested) and keep responsive widths as percentages or max-widths rather than fixed pixels.

Reference: original stylesheet shows the misplaced mobile rules; ’s viewport tip and ’s pointer to responsive techniques are helpful context.

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.

Member #949455 · 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?

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

12 Years Ago

check here