тег pre не отвечает на мобильных устройствах

мой предварительный тег выходит из родительского div на меньшем экране. Он не отвечает на мобильных устройствах, как вы можете видеть на скриншоте. Пожалуйста, помогите мне сделать его отзывчивым

введите здесь описание изображения

CSS:

pre {
            background-color: #FFFFCC;
            border: 1px dashed #FF6666;
            padding-top: 7px;
            padding-bottom: 8px;
            padding-left: 10px;
            margin: 10px;
            float: left;
            padding-right: 10px;
            clear: both;
            }


html pre
person Dhiraj Bezbaruah    schedule 19.07.2020    source источник
comment
Привет, быстро заскочил проверить, решил ли я твою проблему или мне нужно улучшить свои навыки?   -  person shubh1834    schedule 20.07.2020

Ответы (3)


arrow_upward
1
arrow_downward

Используйте Единицы области просмотра, такие как vw или vh вместо px и %, потому что это помочь вам сделать вашу веб-страницу/веб-сайт отзывчивой.

Попробуйте приложенный код, и если он не работает, сообщите мне об этом в комментариях. Я сделаю все возможное, чтобы решить вашу проблему.

pre {
     background-color: #FFFFCC;
     border: 1px dashed #FF6666;
     padding-top: 0.518vw;
     padding-bottom: 0.585vw;
     padding-left: 0.732vw;
     margin: 0.732vw;
     float: left;
     padding-right: 0.732vw;
     clear: both;
     }

person shubh1834    schedule 19.07.2020
comment
Спасибо за ваш ответ, но, похоже, он тоже не работает :( - person Dhiraj Bezbaruah; 21.07.2020
comment
@DhirajBezbaruah Мне очень жаль, что это не сработало для вас, но не могли бы вы сделать мне одолжение: как только вы решите эту проблему, пожалуйста, дайте мне знать, я хотел бы знать, как вы ее решили. - person shubh1834; 21.07.2020
comment
Привет, я добавил ширину: 100% вместе с вашим кодом выше, и это сработало. Спасибо - person Dhiraj Bezbaruah; 23.07.2020
comment
@DhirajBezbaruah Я так рад слышать, что мой ответ немного помог вам, и не могли бы вы сделать мне одолжение, приняв мой ответ и проголосовав за него, это много значит для меня. И спасибо, что рассказали мне, как вы полностью решили проблему. - person shubh1834; 23.07.2020
comment
@DhirajBezbaruah Я так счастлив, что решил вашу проблему, и спасибо, что приняли и проголосовали за мой ответ, вы сделали мой день. Я надеюсь получить больше шансов помочь вам. - person shubh1834; 25.07.2020

arrow_upward
0
arrow_downward

По умолчанию элемент pre предназначен для pre сохранения форматирования текста. Это означает, что текст не будет завернут в него, поэтому он может расширять весь контейнер.

Попробуйте установить правило стиля overflow: scroll; или overflow: hidden; в зависимости от того, что вам нравится.

person Menas    schedule 19.07.2020

arrow_upward
0
arrow_downward

Вместо использования пикселей используйте проценты.

pre {
    background-color: #FFFFCC;
    border: 1% dashed #FF6666;
    padding-top: 1.2%;
    padding-bottom: 1.2%;
    padding-left: 1%;
    margin: 1.5%;
    float: left;
    padding-right: 1.5%;
    clear: both;
    font-size: 1em;
}

Это должно заставить его изменить размер.

person yaxeldragon    schedule 19.07.2020
comment
Привет, спасибо за ваш ответ, но это не работает для меня :( - person Dhiraj Bezbaruah; 19.07.2020