Создание темы CSS отзывчивый

Question

Ниже CSS код для всех моих веб-страницах:

/* 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; } 

Проблема заключается в том, что когда-то у меня есть достаточный текст для добавления на веб-страницу, некоторая часть текста выходит из границы и становится видимым на белом фоне (вне светлого загар). Пусть кто-нибудь скажет мне необходимые изменения, которые мне нужно сделать.

Answer 1

/* 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 */ 
} 

Используйте этот код и подгоняет выиграл работу