Mobile cutting

Asked

Viewed 88 times

0

I am doing a test but on the pc in all sizes works cool now when I climb in the served and eye on the cvelular it cuts the part of the title can 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:

/* CSS RESET */
*, *: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: "\201C" "\201D" "\2018" "\2019";}
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{

    }
}
html5 css3

  • Cutting in what way? Is it sticking out of the screen coming out at the top, or are you talking about the text that doesn’t fit inside the blue box? It’s Bootstrap 3 or 4?

  • face what happens and that the <H1>IN THIS COURSE YOU <br>WILL KNOW:</H1> does not appear I do not know if it is a bug because I put display:flex; no body because I need the container to be centered on the boostrap screen 3

  • I was coming up with an answer, but just putting margin:auto on your . container already tidied up. No need for this wrap

  • could send me to test?

  • It’s just exactly with your question code up there, just at .container you put also the style margin:auto along with what already has there and solves. At least here simulating solved

  • I tried now to put in the . container the Margi:auto no longer worked is a bad practice leave so?

  • Let’s go continue this discussion in chat.

Show 2 more comments

1 answer

0

'Cause I was using display:flex; no body so gave a bug on cell phone and cut the title <h1> I don’t know if it was one of the best solutions <div class="wrap"> that encompassed everything then became 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:

/* CSS RESET */
*, *: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: "\201C" "\201D" "\2018" "\2019";}
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;
    }

}

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.