Абзац, который не отображается на маленьких экранах

У меня есть простая ширина страницы с полным изображением на заднем фоне. На маленьких экранах я вижу горизонтальную полосу, и часть текста скрыта.Абзац, который не отображается на маленьких экранах

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-image: url(FreeVector-Fresh-Beer.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
img { 
 
    margin: auto; 
 
} 
 
.paragraph { 
 
    text-align: center; 
 
    margin-top: 5%; 
 
    width: 100%; 
 
    font-family: 'Alice', serif!important; 
 
    color: #996633; 
 
} 
 
p a { 
 
    color: #996633 !important; 
 
    font-size: 35px !important; 
 
    padding-top: 1%; 
 
} 
 
@media only screen and (min-device-width: 120px) and (max-device-width: 400px) { 
 
    .paragraph { 
 
    word-break: break-all; 
 
    } 
 
}

<body class="jumbotron"> 
 
    <figure> 
 
    <img class="img-responsive" src="Craft-Beer-SA-min.png" alt="Chania"> 
 
    </figure> 
 

 
    <div class="paragraph" style="font-size:50px"> 
 
    <p>Our Website Is Brewing ! ! !</p> 
 
    <p>Coming To A Browser Near You. . . 
 
     <br><a href="">[email protected]</a> 
 
    </p> 
 
    </div> 
 
</body>

Как я могу сохранить текст видимым и удалить панель прокрутки? И как я могу также сделать фоновое изображение отзывчивым, чтобы я мог видеть все это в любом размере экрана?

источник

2016-08-11 Wosley Alarico

вы можете сделать скрипку? – vel

Это потому, что одно слово занимает более 120 пикселей. В этом случае для игнорирования горизонтальной полосы прокрутки требуется минимальная ширина 260 пикселей. – Pugazh

Вот хорошее объяснение: (. Например, 1024 от 1024x768) CSS media queries min-width and min-device-width conflicting?

device-width ссылается на резолюцию дисплея, в то время как width относится к ширине самого браузера (который будет отличаться от разрешение, если браузер не равен ).

Дополнительная ссылка: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Решение:

Вместо min-device-width и max-device-width использование min-width и max-width.

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-image: url(FreeVector-Fresh-Beer.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
img { 
 
    margin: auto; 
 
} 
 
.paragraph { 
 
    text-align: center; 
 
    margin-top: 5%; 
 
    width: 100%; 
 
    font-family: 'Alice', serif!important; 
 
    color: #996633; 
 
} 
 
p a { 
 
    color: #996633 !important; 
 
    font-size: 35px !important; 
 
    padding-top: 1%; 
 
} 
 
@media only screen and (min-width: 120px) and (max-width: 400px) { 
 
    .paragraph { 
 
    word-break: break-all; 
 
    } 
 
}

<body class="jumbotron"> 
 
    <figure> 
 
    <img class="img-responsive" src="Craft-Beer-SA-min.png" alt="Chania"> 
 
    </figure> 
 

 
    <div class="paragraph" style="font-size:50px"> 
 
    <p>Our Website Is Brewing ! ! !</p> 
 
    <p>Coming To A Browser Near You. . . 
 
     <br><a href="">[email protected]</a> 
 
    </p> 
 
    </div> 
 
</body>

источник

2016-08-11 07:12:29 Pugazh

Спасибо. Я просто установил размер шрифта на 5vw, и он сортирует все. Следующая проблема заключается в фоновом изображении. Я вижу, что он скрывает его содержание. Как я могу сделать его отзывчивым, чтобы увидеть все изображение в любом размере экрана? –

Абзац, который не отображается на маленьких экранах

ответ

Смежные вопросы