divを反応させる（テキスト付きの透明な黒いボックス）

Question

私はかなり初心者のCSSです。私はモバイル用に作成されたdivを作成するのに助けが必要です。今ではサイズが変更されず、テキストを読むことも、携帯からボックス全体を見ることもできません。私は、CSSエディタでこれを持っている：私はボックスは、テキストおよびサブスクリプション形式のコードのスニペットを包み込むようにしたいので、私はそれが特定のピクセルに設定していた

.mod { 
    position: relative; 
    width: 875px; 
    height: 350px; 
    padding: 5px; 
} 

.mod-text, 
.mod-background { 
    position: absolute; 
    left: 15%; 
    width: 100%; 
} 

.mod-text { 
    color: #FFF; 
    font-size: 1em; 
    text-align: center; 
    bottom: 0; 
} 

.mod-background { 
    background-color: #000000; 
    border-radius: 8px; 
    filter: alpha(opacity=60); 
    opacity: .6; 
    top: 0; 
    height: 100%; 
} 

理由があります。助けが大いにありがとう！

Answer 1

[OK]をので、私はテーマは、ホームページ上の右に少し私のコンテンツを推進していると思いますが、これは私のために働いていたCSSスニペットです：

.container { 
    position: relative; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 75%; 
    height: auto; 
    } 
.content { 
    position: relative; 
    color: White; 
    padding: 10px; 
    z-index: 5; 
} 
.background { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: Black; 
    z-index: 1; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
    opacity: .5; 
} 
.center { 
    float: none; 
    margin-left: auto; 
    margin-right: auto; 
}