Mobile hacking

0

Personal I'm doing a test however on the pc in all sizes it works cool now when I go up on the server and look at the cvelular it cuts the part of the title can you help me?

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Teste Front-end | Atividade HTML e CSS</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

        <div class="container">
                <div class="row">
                  <div class="col-sm-6 ">
                        <h1>NESTE CURSO VOCÊ <br>VAI CONHECER:</h1>
                    <ul>                    

                                <li>O que é uma <b>dieta balanceada;</b></li>
                                <li>O que são <b>nutrientes</b>,como eles são</li>
                                <li>classificados e qual sua função;</li>
                                <li>A importancia de uma dieta balanceada para o</li>
                                <li>pets.</li>
                                <li>Lorem ipsum dolor, <b>consectetur adipisicing elit</b>.</li>
                                <li>Lorem ipsum dolor, consectetur adipisicing elit</li>
                                <li>Lorem sit amet, consectetur adipisicing elit.</li>
                                <li>Lorem sit amet, consectetur adipisicing elit.</li>

                  </div>
                  <div class="col-sm-6">

                    <img class="img-responsive" src="http://fipasoftwares.16mb.com/casa.png"></div></div></div></body></html>

CSS:

/*CSSRESET*/*,*:before,*:after{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main{display:block;}audio,canvas,video{display:inline-block;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body,button,input,select,textarea{font-family:sans-serif;}:active,:focus,a:hover{outline:0;}b,strong{font-weight:bold;}pre{white-space:pre-wrap;}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0;}q{quotes:"1C" "1D" "18" "19";}
sub,sup{font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup{top: -.5em;}
sub{bottom: -.25em;}
img{border: 0; -ms-interpolation-mode:bicubic;}
svg:not(:root){overflow: hidden;}
legend{border: 0;}
button,input,select,textarea{vertical-align: middle;}
button,input{line-height: normal;}
button,input[type=button],input[type=reset],input[type=submit]{ border: none; cursor: pointer; overflow: visible; -webkit-appearance: button;}
button, select {text-transform: none;}
input[type=search]{-moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield; -webkit-box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner,
input::-moz-focus-inner{border: 0;}
textarea{overflow: auto; vertical-align: top;  resize: none;}
audio:not([controls]) {display: none; height: 0;}
[hidden]{display: none;}
button[disabled],html input[disabled] {cursor: default;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box;}
body, html {height: 100%; width: 100%;}
body {overflow: -moz-scrollbars-vertical;}


/*Estilo*/
body{
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    background-image: url("../../img/BG.png");
    width: 100%;
    height: 100%;
}

.container{
    background-color: white;
    padding: 0;
    width: 1347px;
}

.container > div > div > h1{
    background-color: #005581;
    border-radius: 0 15px 0 0;
    padding: 20px;
    color:white;
}
.container > div > div > ul{
    margin-left: 30px;
}
.container > div > div > img{
    padding: 20px;
}

li{list-style: disc;color: #005581; font-size: 13pt;margin-left: 10px;}

@media screen and (min-width: 1440px) {
  .container{
    width: 975px;
  }
}
@media screen and (max-width: 1440px) {
    .container > div > div > h1{

    }
}
    
asked by anonymous 06.09.2018 / 02:05

1 answer

0

I was using display:flex; in the body so I gave a bug in the phone and cut the title <h1> I do not know if it was one of the best solutions I created a <div class="wrap"> that included everything so it looked like this:

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Teste Front-end | Atividade HTML e CSS</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="wrap">
        <div class="container">
                <div class="row">
                  <div class="col-sm-6 ">
                        <h1>NESTE CURSO VOCÊ <br>VAI CONHECER:</h1>
                    <ul>                    
                        <li>O que é uma <b>dieta balanceada;</b></li>
                        <li>O que são <b>nutrientes</b>,como eles são</li>
                        <li>classificados e qual sua função;</li>
                        <li>A importancia de uma dieta balanceada para o</li>
                        <li>pets.</li>
                        <li>Lorem ipsum dolor, <b>consectetur adipisicing elit</b>.</li>
                        <li>Lorem ipsum dolor, consectetur adipisicing elit</li>
                        <li>Lorem sit amet, consectetur adipisicing elit.</li>
                        <li>Lorem sit amet, consectetur adipisicing elit.</li>

                </div>
                  <div class="col-sm-6">

                        <img class="img-responsive" src="http://fipasoftwares.16mb.com/casa.png"></div></div></div></div></body></html>

CSS:

/*CSSRESET*/*,*:before,*:after{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main{display:block;}audio,canvas,video{display:inline-block;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body,button,input,select,textarea{font-family:sans-serif;}:active,:focus,a:hover{outline:0;}b,strong{font-weight:bold;}pre{white-space:pre-wrap;}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0;}q{quotes:"1C" "1D" "18" "19";}
sub,sup{font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup{top: -.5em;}
sub{bottom: -.25em;}
img{border: 0; -ms-interpolation-mode:bicubic;}
svg:not(:root){overflow: hidden;}
legend{border: 0;}
button,input,select,textarea{vertical-align: middle;}
button,input{line-height: normal;}
button,input[type=button],input[type=reset],input[type=submit]{ border: none; cursor: pointer; overflow: visible; -webkit-appearance: button;}
button, select {text-transform: none;}
input[type=search]{-moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield; -webkit-box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner,
input::-moz-focus-inner{border: 0;}
textarea{overflow: auto; vertical-align: top;  resize: none;}
audio:not([controls]) {display: none; height: 0;}
[hidden]{display: none;}
button[disabled],html input[disabled] {cursor: default;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box;}
body, html {height: 100%; width: 100%;}
body {overflow: -moz-scrollbars-vertical;}


/*Estilo*/
body{
    background-image: url("../../img/BG.png");
}
 #wrap{
     display: flex;
    height: 881px;
    align-items: center;
}

.container{
    background-color: white;
    padding: 0;
}

.container > div > div > h1{
    background-color: #005581;
    border-radius: 0 15px 0 0;
    padding: 20px;
    color:white;
}
.container > div > div > ul{
    margin-left: 30px;
}
.container > div > div > img{
    padding: 20px;
}

li{list-style: disc;color: #005581; font-size: 13pt;margin-left: 10px;}

@media screen and (min-width: 1440px) {
  .container{
    width: 975px;
  }
}
 @media screen and (max-width: 768px) {
    .container{
        display: block;
        height: auto;
    }

}  
    
06.09.2018 / 02:31