Making the CSS theme responsive

Question

Following is CSS code for all my web pages:

   /* Site Colors:
    #1A446C - blue grey
    #689DC1 - light blue
    #D4E6F4 - very light blue
    #EEE4B9 - light tan
    #8D0D19 - burgundy
*/

html { height: 100%; width: 100%; }
body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif; background: #D4E6F4;
    font-size: 13px; line-height: 15px; }
img { border: none; }
table, tr, td { border-collapse: collapse; vertical-align: top; font-size: 13px; line-height: 15px;}
a { color: #8D0D19;}

#header { height: 70px; margin: 0px; padding: 0px; text-align: left; 
    background: #1A446C; color: #D4E6F4; }
#header h1 { padding: 1em; margin: 0px;}
#main { margin: 0px; padding: 0px; height: 600px; width: 100%; background: #EEE4B9; }
#structure { height: 600px; width: 100%; }
#footer { height: 2em; margin: 0px; padding: 1em; text-align: center; 
    background: #1A446C;  color: #D4E6F4; }

/* Navigation */
#navigation { width: 150px; padding: 1em 2em; color: #D4E6F4; background: #8D0D19; }
#navigation a { color: #D4E6F4; text-decoration: none; }
ul.subjects { padding-left: 0; list-style: none; }
ul.pages { padding-left: 2em; list-style: square; }
.selected { font-weight: bold; }

/* Page Content */
#page { padding-left: 2em; vertical-align: top; background: #EEE4B9; }
#page h2 { color: #8D0D19; margin-top: 1em;}
#page h3 { color: #8D0D19; }

Problem is that once I have sufficient text to add to a web page, some part of the text goes out of bound and gets visible in white background(outside the light tan).Can anyone tell me necessary changes I need to make.

Bipin Kumar Pal · Accepted Answer · 2013-11-14 10:57:19Z

4

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Use this code and customize won work

answered Nov 14, 2013 at 10:57

Bipin Kumar Pal

1,0272 gold badges8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mithilesh Over a year ago

Good as far device dependency is concerned but how do i make it responsive in my case?

Bipin Kumar Pal Over a year ago

please use width and other tag properties in @media target screen max-width

Collectives™ on Stack Overflow

Making the CSS theme responsive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related