より大きい画面解像度に対応しないHTML

Question

私はクライアントのサイトで作業しています。本当に奇妙なことが起こっています。現在のサイトはここにありますhttp://107.170.219.136

サイトの外観は私の画面解像度（1920x1080）で見つかりますが、解像度が高い場合は、バナーとバナーのテキストが画面サイズに反応しないようです。私は2,560の画面解像度のサイトをテストしたとき、それは次のように表示されます。

2560x1440

テスターは、私は可能なのために検索してきたI.同じ画面解像度と同じ問題を報告している、が、私のCSSにメディアのブレークポイントを追加し、バナーをmax-wdith: 100%;に設定するなどの方法はありません。ここでは、サイトのバナーHTMLピースだ：任意のアドバイスははるかに高く評価されるように

HTML

<div id="banner"> 
    <img src="assets/sd-home.jpeg"> 
    <div id="bannerText"> 
     <h1>San Diego’s First Choice for Bankruptcy Relief</h1> 
    <div class="banner_sep">&nbsp;</div> 

とフルCSS

body{ 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    font-family: 'Open Sans', sans-serif; 
    background: #fff; 
} 
::-webkit-input-placeholder { 
    color: #a4a4a4; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    color: #a4a4a4; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: #a4a4a4; 
} 

:-ms-input-placeholder { 
    color: #a4a4a4; 
} 
img{ 
    max-width: 100%; 
    padding: 0; 
    margin: 0; 
} 
a{ 
    text-decoration: none; 
} 
.clearfix{ 
    clear: both; 
} 
.wraper{ 
    padding: 0; 
    margin: 0; 
    max-width: 100%; 
} 
.maincontainer{ 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 0; 
} 
.topbar_bg{ 
    padding: 12px 0; 
    margin: 0; 
    width: 100%; 
    background: #fff; 
    box-shadow: 0 0 5px #000; 
} 
.topbar{ 
    padding: 0; 
    margin: 0; 
} 
.logo{ 
    font-size: 24px; 
    color: #3b97d3; 
    padding: 15px 0 0 0; 
    font-weight: 700; 
    margin: 0; 
    float: left; 
    max-width: 26%; 
    width: 100%; 
    text-transform: uppercase; 
} 
.logo span{ 
    color: #3a3a3a; 
} 
.logo span.lg_fl{ 
    font-weight: 400; 
    text-transform: none; 
} 
.logo span.lg_cm{ 
    font-size: 16px; 
    text-transform: none; 
    font-weight: 400; 
} 
.topbar_rght{ 
    max-width: 542px; 
    padding: 0; 
    margin: 0; 
    float: right; 
    width: 100%; 
} 
.location{ 
    float: left; 
    padding: 0; 
    margin: 0; 
    max-width: 46%; 
    width: 100%; 
} 
.location a{ 
    padding: 0; 
    margin: 0; 
    text-decoration: none; 
} 
.location a .icon_location{ 
    max-width: 48px; 
    float: left; 
    width: 100%; 
    padding: 0; 
    margin: 0 20px 0 0; 
} 
.location a p{ 
    padding: 0; 
    margin: 0; 
    font-size: 16px; 
    color: #3a3a3a; 
    font-weight: 400; 
    line-height: 18px; 
} 
.phone{ 
    padding: 0; 
    margin: 0; 
    max-width: 47%; 
    float: right; 
    width: 100%; 
} 
.phone a{ 
    padding: 0; 
    margin: 0; 
    text-decoration: none; 
} 
.phone a .icon_phone{ 
    padding: 0; 
    margin: 0 15px 0 0; 
    float: left; 
    max-width: 32px; 
    width: 100%; 
} 
.phone a p{ 
    padding: 0; 
    margin: 0; 
    font-size: 20px; 
    color: #3a3a3a; 
    font-weight: 400; 
    line-height: 20px; 
} 
.phone a h4{ 
    padding: 0; 
    margin: 0; 
    font-size: 24px; 
    color: #3b97d3; 
    font-weight: 700; 
    line-height: 30px; 
} 
.video{ 
    padding: 150px 0; 
    margin: 0; 
    width: 100%; 
    position: relative; 
    border-bottom: 10px solid #eaeaea; 
} 

#banner{ 
    position: relative; 
    max-width: 100% 
} 



#bannerText { 
    position: absolute; 
    top: 20px; 
    left: 10px; 
    font-weight: 700; 
    color: #fff; 
    font-size: 4vw; 
    text-transform: uppercase; 
    text-align: center; 

} 

.banner_sep{ 
    padding: 0; 
    margin: 0 auto; 
    max-width: 500px; 
    width: 100%; 
    background: rgba(255,255,255, 0.5); 
    height: 1px; 
    margin-top: 40px; 
    margin-bottom: 40px; 
} 
.section2{ 
    padding: 60px 0; 
    margin: 0; 
    background: url(../images/texture.jpg) repeat; 
    width: 100%; 
    border-bottom: 10px solid #eaeaea; 
} 
.section2_content{ 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 
.section2_lft{ 
    max-width: 480px; 
    padding: 0; 
    margin: 0; 
    float: left; 
    width: 100%; 
} 
.section2_rght{ 
    padding: 0; 
    margin: 0; 
    max-width: 490px; 
    width: 100%; 
    float: right; 
} 
.section2_heading{ 
    padding: 0; 
    /*margin: 22px 0 10px 40px;*/ 
    margin: 22px auto 10px auto; 
    /*max-width: 245px;*/ 
    width: 100%; 
} 
.section2_head_lft{ 
    float: left; 
    height: 1px; 
    background: #3b97d3; 
    max-width: 220px; 
    width: 100%; 
} 
.section2_head_mdle{ 
    float: left; 
    max-width: 23px; 
    width: 100%; 
    padding: 0; 
    margin: -22px 0 0 12px; 
} 
.section2_head_rght{ 
    float: right; 
    height: 1px; 
    background: #3b97d3; 
    max-width: 220px; 
    width: 100%; 
} 
.section2_lft p{ 
    font-size: 16px; 
    padding: 25px 0 0 0; 
    margin: 0; 
    line-height: 24px; 
    font-weight: 400; 
    color: #595959; 
} 
.section2_lft h3{ 
    font-size: 20px; 
    padding: 20px 0 0 0; 
    margin: 0; 
    line-height: 26px; 
    font-weight: 500; 
    color: #595959; 
} 
.section2_lft h2{ 
    font-size: 36px; 
    padding: 0; 
    margin: 0; 
    line-height: 1; 
    font-weight: 700; 
    color: #3a3a3a; 
} 
.form_bg{ 
    padding: 20px 20px 10px 20px; 
    margin: 0; 
    background: #f8f8f8; 
    border: 5px solid #e0e0e0; 
    border-radius: 10px; 
    max-width: 450px; 
    width: 100%; 
} 
.form_heading{ 
    text-align: center; 
    padding: 0 0 20px 0; 
    margin: 0 auto; 
    max-width: 400px; 
    width: 100%; 
} 
.form_heading h1{ 
    font-size: 30px; 
    font-weight: 700; 
    padding: 3px 0 0 0; 
    line-height: 1; 
    margin: 0; 
    color: #3a3a3a; 
    text-align:left; 
} 
.fields{ 
    padding: 0; 
    margin: 0 auto; 
    max-width:440px; 
    width: 100%; 
} 
.form-control{ 
    padding: 0; 
    margin: 0 0 15px 0; 
    width: 100%; 
} 
.input_field{ 
    padding: 11px 3%; 
    margin: 0; 
    max-width: 94%; 
    width: 100%; 
    border-radius: 10px; 
    border: 1px solid #e9e9e9; 
    font-size: 14px; 
    font-weight: 400; 
    color: #a4a4a4; 
    font-family: 'Open Sans', sans-serif; 

} 
.frm_lft{ 
    max-width: 48%; 
    padding: 0; 
    margin: 0 4% 0 0; 
    float: left; 
    width: 100%; 
} 
.frm_rght{ 
    max-width: 48%; 
    padding: 0; 
    margin: 0; 
    float: right; 
    width: 100%; 
} 
.select_field{ 
    padding: 12px 3%; 
    margin: 0; 
    max-width: 100%; 
    width: 100%; 
    border-radius: 10px; 
    border: 1px solid #e9e9e9; 
    -webkit-appearance:none; 
    -moz-appearance:none; 
    appearance:none; 
    font-size: 14px; 
    font-weight: 400; 
    color: #a4a4a4; 
    font-family: 'Open Sans', sans-serif; 

} 
.textarea{ 
    padding: 11px 3%; 
    margin: 0; 
    max-width: 94%; 
    width: 100%; 
    border-radius: 10px; 
    border: 1px solid #e9e9e9; 
    font-size: 14px; 
    font-weight: 400; 
    color: #a4a4a4; 
    min-height: 80px; 
    height: auto; 
    font-family: 'Open Sans', sans-serif; 
} 
.btn_sbmit{ 
    padding: 28px 0; 
    text-align: center; 
    background: #3b97d3; 
    border-radius: 6px; 
    margin: 0 auto; 
    font-size: 30px; 
    color: #fff; 
    font-weight: 700; 
    width: 100%; 
    border: none; 
    cursor: pointer; 
    box-shadow: 0 5px 0 #245977; 
} 
.btn_sbmit:hover{ 
    background: #318ac5; 
} 
.frm_lines{ 
    position: relative; 
    top: -5px; 
} 
.help_bg{ 
    padding: 60px 0; 
    margin: 0; 
    width: 100%; 
} 
.help_content{ 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 
.help_heading{ 
    max-width: 560px; 
    margin: 0 auto; 
    padding: 0; 
    width: 100%; 
    text-align: center; 
    line-height: 1; 
    font-weight: 700; 
    color: #3a3a3a; 
    font-size: 48px; 
} 
.heading_icon{ 
    padding: 0 0 5px 0; 
    margin: 0 auto; 
    max-width: 245px; 
    width: 100%; 
} 
.help_head_lft{ 
    float: left; 
    height: 1px; 
    background: #3b97d3; 
    max-width: 100px; 
    width: 100%; 
} 
.help_head_mdle{ 
    float: left; 
    max-width: 23px; 
    width: 100%; 
    padding: 0; 
    margin: -36px 0 0 12px; 
} 
.help_head_rght{ 
    float: right; 
    height: 1px; 
    background: #3b97d3; 
    max-width: 100px; 
    width: 100%; 
} 
.chapters{ 
    padding: 0; 
    margin: 100px 0 0 0; 
    width: 100%; 
} 
.chapter_colm{ 
    padding: 0 19px 20px 19px; 
    margin: 0 2% 0 0; 
    max-width: 280px; 
    width: 100%; 
    float: left; 
    text-align: left; 
    border: 1px solid #dedede; 
    border-radius: 10px; 
    min-height: 490px; 
} 
.chapter_colm:hover{ 
    box-shadow: 0 0 10px #cecece; 
} 
.chapter_icon{ 
    padding: 12px 0; 
    margin: 0 auto; 
    max-width: 120px; 
    border: 2px solid #3b97d3; 
    border-radius: 12px; 
    text-align: center; 
    background: #fff; 
    margin-top: -50px; 
} 
.chapter_colm h3{ 
    padding: 25px 0 0 0; 
    margin: 0; 
    font-size: 30px; 
    color: #3a3a3a; 
    text-align:center; 
} 
.chapter_colm h2{ 
    padding: 25px 0 0 0; 
    margin: 0; 
    font-size: 28px; 
    color: #3a3a3a; 
    font-weight: 500; 
} 
.chapter_colm p{ 
    padding: 15px 0 0 0; 
    margin: 0; 
    font-size: 14px; 
    color: #595959; 
    font-weight: 400; 
    line-height: 22px; 
} 
.chapter_line{ 
    max-width: 60px; 
    width: 100%; 
    padding: 0; 
    margin: 0 auto; 
    height: 4px; 
    background: #3b97d3; 
    margin-top: 15px; 
} 
@media screen and (min-width:850px) { 
.chapter_colm_mrg, .chapter_colm:nth-child(3n+3){ 
    margin-right: 0; 
} 
.chapter_colm:nth-child(3n+4){ 
    clear:both; 
} 
} 
.help_option{ 
    padding: 40px 0; 
    margin: 0; 
    width: 100%; 
} 
.help_colm{ 
    padding: 0; 
    margin: 0 2% 0 0; 
    max-width: 32%; 
    width: 100%; 
    float: left; 
} 
@media screen and (min-width:850px) { 
.help_colm_mrg, .help_colm:nth-child(3n+3){ 
    margin-right: 0; 
} 

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

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 
.help_colm:nth-child(3n+4){ 
    clear:both; 
} 
} 
.help_colm_lft{ 
    padding: 0; 
    float: left; 
    margin: 0; 
    max-width: 24%; 
    width: 100%; 
    font-size: 60px; 
    font-weight: 300; 
    color: #3b97d3; 
} 
.help_colm_rght{ 
    float: right; 
    padding: 0; 
    margin: 0; 
    /*max-width: 100%;*/ 
    width: 100%; 
} 
.help_colm_rght h4{ 
    color: #3b97d3; 
    padding: 0 0 5px 0; 
    margin: 0; 
    font-size: 20px; 
    font-weight: 500; 
} 
.help_colm_rght h3{ 
    color: #3a3a3a; 
    padding: 10px 0; 
    margin: 0; 
    font-size: 18px; 
    font-weight: 500; 
} 
.help_colm_rght p{ 
    color: #767676; 
    padding: 0; 
    margin: 0; 
    font-size: 14px; 
    font-weight: 400; 
    line-height: 24px; 
} 
.grey_bg{ 
    padding: 50px 0; 
    margin: 0; 
    background: #3a3a3a; 
    width: 100%; 
} 
.btns{ 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 
.btn_green{ 
    max-width: 470px; 
    padding: 0; 
    margin: 0; 
    float: left; 
    width: 100%; 
} 
.btn_green a{ 
    font-size: 26px; 
    color: #fff; 
    font-weight: 400; 
    padding: 12px 0; 
    margin: 0; 
    background: #72b12f; 
    text-align: center; 
    border-radius: 6px; 
    width: 100%; 
    display: block; 
    box-shadow: 0 5px 0 #507f19; 
} 
.btn_green a span{ 
    font-size: 40px; 
    font-weight: 700; 
    line-height: 1; 
} 
.btn_green a:hover{ 
    background: #68a527; 
} 
.btn_blue{ 
    max-width: 470px; 
    padding: 0; 
    margin: 0; 
    float: right; 
    width: 100%; 
} 
.btn_blue a{ 
    font-size: 40px; 
    color: #fff; 
    font-weight: 700; 
    padding: 25px 0; 
    margin: 0; 
    background: #3b97d3; 
    text-align: center; 
    border-radius: 6px; 
    width: 100%; 
    display: block; 
    box-shadow: 0 5px 0 #245977; 
} 
.btn_blue a:hover{ 
    background: #358ec8; 
} 
.footer_bg{ 
    padding: 30px 0; 
    margin: 0; 
    width: 100%; 
    background: #fff; 
} 
.footer{ 
    padding: 0; 
    margin: 50px 0 0 0; 
} 
.footer_lft{ 
    padding: 0; 
    margin: 0; 
    float: left; 
    /*max-width: 33%; 
    width: 100%;*/ 
} 
.footer_lft ul{ 
    padding: 0; 
    margin: 0; 
} 
.footer_lft ul li{ 
    padding: 0 8px; 
    margin: 0; 
    list-style: none; 
    display: inline; 
    border-right: 1px solid #fff; 
} 
.footer_lft ul li:last-child{ 
    border-right: none; 
} 
.footer_lft ul li a{ 
    font-size: 14px; 
    color: #fff; 
    padding: 0; 
    margin: 0; 
    font-weight: 400; 
    text-decoration: none; 
} 
.footer_lft ul li a:hover{ 
    color: #b5afaf; 
} 
.footer_rght{ 
    float: right; 
    padding: 0; 
    margin: 0; 
    font-size: 14px; 
    color: #fff; 
    font-weight: 400; 
} 
.error{ 
    text-align: left!important; 
    width: 100%; 
    max-width: none; 
} 
.thankyou { 
    padding: 35px 20px 50px 20px; 
    margin: 0; 
    background: #f8f8f8; 
    border: 5px solid #e0e0e0; 
    border-radius: 10px; 
    max-width: 450px; 
    width: 100%; 
} 
.thankyou_heading{ 
    margin: 0 auto; 
    text-align: center; 
    padding: 0; 
    width: 100%; 
} 
.thankyou_heading h1{ 
    font-size: 48px; 
    padding: 0; 
    margin: 0; 
    line-height: 1; 
    font-weight: 700; 
    color: #3a3a3a; 
    text-transform: uppercase; 
    text-align: center; 
} 
.thankyou p { 
    font-size: 15px; 
    padding: 10px 0 0 0; 
    margin: 0; 
    line-height: 24px; 
    font-weight: 400; 
    color: #595959; 
    text-align: center; 
} 
.thankyou{ 
    display: none; 
} 
.icon-icon_judge{ 
    font-size: 78px; 
    color: #3a3a3a; 
} 
.icon-icon_lawer{ 
    font-size: 78px; 
    color: #3a3a3a; 
} 
.icon-icon_weight{ 
    font-size: 78px; 
    color: #3a3a3a; 
} 
.btn_green2{ 
    max-width: 470px; 
    padding: 0; 
    margin: 52px 0 0 0; 
    float: left; 
    width: 100%; 
} 
.btn_green2 a{ 
    font-size: 26px; 
    color: #fff; 
    font-weight: 400; 
    padding: 11px 0; 
    margin: 0; 
    background: #72b12f; 
    text-align: center; 
    border-radius: 6px; 
    width: 100%; 
    display: block; 
    box-shadow: 0 5px 0 #507f19; 
} 
.btn_green2 a span{ 
    font-size: 40px; 
    font-weight: 700; 
    line-height: 1; 
} 
.btn_green2 a:hover{ 
    background: #68a527; 
} 

私は、応答性の設計にかなり新しいです。私はちょうどそれが私のために現われるのと同じように見えるようにしたいと思います。

Answer 1

問題はimg { max-width: 100%; } CSSです。これは画像の最大幅が100％になるまで画像が盛り上がるようにしてからさらに拡大しません。それはあなたのサイトのイメージの一般的なルールとしては素晴らしいですが、イメージが超ワイドスクリーンのネイティブの幅を超えるようにしたい場合はあまり役に立ちません。このCSSを追加すると、その画像は大きな画面に拡大されます#banner > img { width: 100%; }