pre tag not responsive in mobile

Question

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

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

Answer 1

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