CODEWITHSUNDEEP
htmlpre
Dhiraj Bezbaruah
Dhiraj Bezbaruah

Reputation: 39

pre tag not responsive in mobile

my pre tag goes out of parent div in smaller screen. It's not responsive in mobile as u can see in the screenshot. Please help me to make it responsive

enter image description here

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

Upvotes: 2

Views: 1524

Answers (3)

yaxeldragon
yaxeldragon

Reputation: 43

Instead of using pixels use percentage.

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

That should make it so it re-size itself.

Upvotes: 0

Menas
Menas

Reputation: 1269

By default, the pre element is meant to preserve text formating. That means that text will not be wrapped inside it, that's why it can expand the whole container.

Try setting the style rule overflow: scroll; or overflow: hidden; whichever you like.

Upvotes: 1

s1834
s1834

Reputation: 443

Use Viewport Units like vw or vh instead of px and % because it will help you make your webpage/website responsive.

Try the attached code and if it doesn't work please let me know in the comments. I will try my best to solve your issue.

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

Upvotes: 2

Related Questions