0

Estive criando o website com o código abaixo porém não consigo deixá-lo responsivo na parte MOBILE(320x568), o conteúdo fica do lado esquerdo e do lado direito fica uma parte grande branca no site inteiro.

Já tentei media screen mas não consegui. Alguma sugestão para torná-lo totalmente responsivo, em todos os navegadores?

Além disso, como sou novo em desenvolvimento WEB, com meu código abaixo se tiverem algumas dicas ou formatações melhores a serem feitas, ficaria agradecido de ouvi-las.

<!DOCTYPE html>
<html>
<head>
    <title>FlexBlog</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,400i,700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
    <link rel="shortcut icon" href="images/web_hi_res_512.png" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>

    <header class="menu-bg">
        <div class="menu">
            <div class="menu-logo">
                <img href="#" src="images/logo.png">    
            </div>
            <nav class="menu-nav">
                <ul>
                    <li><a href="#sobre">Home</a></li>
                    <li><a href="#produtos">Products</a></li>
                    <li><a href="#preco">About</a></li>
                    <li><a href="#qualidade">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="principal">
        <h1> WELCOME TO THE INFINITY.</h1>
        <h2>THANKS FOR VISITING THE INFINITY</h2>
        <h3>IT'S A PLEASURE TO HAVE YOU HERE. ENJOY THE WEBSITE AND THE PRODUCTS.</h3>
        <button type="button" name="" value="" class="css3button">Learn More</button>
    </section>

    <section class="conteudo">
        <h1>More about the products</h1>
        <h2>We have several benefits that have left you impressed.</h2>
        <hr>
        <ul class="grid">
            <li>
                <img src="images/primeiro.png">
                <h2>SEO Searching Optimization</h2>
            <p>We have the best search engine optimization option. Your site will be among the top search engines like Google and Yahoo.</p>
        </li>

        <li>
                <img src="images/segundo.png">
                <h2>Responsive WebSite</h2>
            <p>We all know that it is essential to have a responsive website. Well, here at Infinity this aspect is a condition on all our sites.</p>
        </li>

        <li>
                <img src="images/terceiro.png">
                <h2>Most beautiful websites</h2>
            <p>We have the most beautiful sites in the internet.Everything we do here is make we love and attetion. Your website is gonnar be the most bright site.</p>
        </li>

        </ul>
    </section>
        <section class="newsletter">
            <h1>NewsLetter</h1>
            <hr>
            <p>Fill in the data below and we will send you recent updates every month to keep you updated on Infinity new</p>
                <form>
            <input type="text" name="escrever"value="Write your E-Mail">
            <button>Send</button>
                </form>


        </section>

        <footer>
            <ul>
                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                <li><a href="#"><i class="fas fa-at"></i></a></li>
                <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
            </ul>

                <h2> All the rights reserved - Infinity 2018 ®</h1>
                <h1>Design by Matheus Luiz</h1>
            </footer>
</body>
</html>


CSS :

* {
    margin: 0;
    padding: 0;
    font-family: 'Arimo', sans-serif;
}
.menu-bg {
    background: black;
}

.menu {
    max-width: 1900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-family: 'Arimo', sans-serif;

}

.menu a {
    color: white;
    font-size: 1em;
    font-weight: bold;
}

.menu-logo img {
    margin-left: 30px;
    width: 250px;
}

.menu-nav ul{
    display: flex;
    flex-wrap: wrap;
}

.menu-nav a {
    display: block;
    padding: 20px;
    font-size: 1.3em;
    text-decoration: none;
}
.menu-nav a:hover {
    color:gray;
}
.principal {
    background-image: url(../images/one.jpg);
    background-size: cover;
    min-height: 60vh;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Arimo',sans-serif;
}

.principal h1 {
    margin-bottom: 100px;
    font-size: 5em;
    color: white;
}
.principal h2 {
    font-size: 1.25em;
    margin-bottom: 20px;
    flex-wrap: wrap;

}

.principal button {
-moz-appearance: none;
        -webkit-appearance: none;
        -o-appearance: none;
        -ms-appearance: none;
        appearance: none;
        -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        background-color: #3cadd4;
        border-radius: 30px;
        border: 0;
        color: #ffffff !important;
        cursor: pointer;
        display: inline-block;
        font-weight: 400;
        height: 2.85em;
        line-height: 2.95em;
        padding: 0 2em;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        font-size: 1.25em;
        margin-top: 50px;
        margin-bottom: 30px;
    }

.principal button:hover {
            background-color: #51b6d9;
            text-decoration: none;
}


.conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    background-color: #dad8d8;
}
.conteudo h1 {
    font-size: 3em;
    margin-bottom: 15px;
    text-align: center;
}
.conteudo h2 {
    font-size: 1.9rem;
    margin-bottom: 35px;
    color: black;
    text-align:center;
}

.conteudo p {
    font-size: 1.4rem;
    color: #606060;
}

.conteudo hr {
    width: 200px;
    height: 2px;
    background-color: #606060;
    margin-bottom: 80px;
}

.conteudo .grid {
    width: 100%;
    display: flex;
    text-align: center;
}

.conteudo .grid li {
    padding: 30px;
}

.conteudo .grid li img {
    width: 150px;
    margin-bottom: 30px;
}

@media(max-width: 850px){
    .conteudo .grid {
        flex-direction: column;
    }
}

@media(max-width: 850px){
    .menu-nav {
        padding-left: 35px;
        padding-top: -10px;
    }
}

@media(max-width: 850px) {
    .menu-logo {
        margin: 0 auto;
    }
}

@media(max-width:800px) {
    .principal {
        padding-top: 10px;
        text-align: center;
    }
}

.newsletter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.newsletter h1 {
    font-size: 3.5rem;
    padding-bottom: 10px;
    text-align: center;
}


.newsletter hr {
    width: 300px;
    height: 3px;
    background-color: black;
    margin-bottom: 40px;
    margin-top: 40px;
}

.newsletter p {
    font-size: 1.5rem;
    color: #606060;
    padding-bottom: 20px;
    text-align: center;
}
.newsletter form {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 
}

.newsletter input {
    padding: 15px;
    border: 1px solid #606060;
    border-radius: 4px;
    margin-right: 15px;
    width: 400px;
    margin-bottom: 20px;
}
.newsletter button {
    padding: 13px;
    border: 1px solid #606060;
    border-radius: 4px;
    margin-bottom: 20px;
    background-color: #606060;
    color: white;
}
.newsletter button:hover {
    color: white;
}

footer {
    background-color: black;
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 50px 0;
    align-items: center;
}

footer h1 {
    color: white;
}

footer h2 {
    color:white;
    margin-bottom: 20px;
}

footer ul {
    display: flex;
    margin-bottom: 20px;
}
footer ul li {
    margin-right: 30px;
}

footer ul li:last-child {
    margin-right: 0;
}
footer ul li a {
    color: #606060;
    font-size: 4rem;
}

footer ul li a:hover {
    color: white;
}
1
  • 2
    Cara não existe tag que deixe o site todo responsivo, vc tem que criar suas regras de CSS para cada breacking point definido nos @media.... No seu caso vc basicamente só colocou 2 medias queris media(max-width: 850px) e 800px. Vc tem que fazer regras para por exemplo 768px 540px e 320px tratando seu CSS em cada um deles... Se quer que um elemento suma ou só aparece em telas menores que 540px, ou se algum elemento deve ficar com 100% de largura em 320px etc, por ai vai... E os midia query devem ser a últimas linhas do seu CSS eles não devem vir no meio do código, tem que ser no final!
    – hugocsl
    Commented 9/08/2018 às 14:50

1 Resposta 1

1

Olá @Matheus Lopes,

Adicione essa tag no topo de seu site:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Isso irá fazer com que a visualização no dispositivo seja interpretada com escala em proporção ao mobile.

  • Precisamos verificar cada recurso em relação a sua adaptação, como header, footer e demais conteúdos presentes em seu site.

  • Experimenta a media query dessa forma:

    @media all and (min-width:1px) and (max-width:320px){
         .nome_da_classe{
            propriedade:atributo
         }
    }
    
3
  • Nao Consegui, coloquei a tag meta no HTML e no caso do @media não consegui achar a propriedade para que o site por inteiro nao tenha seja reduzido Commented 9/08/2018 às 14:37
  • Oi @Matheus Lopes, com a meta tag viewport scale=1.0, a visualização deve ficar 100% em seu cel. Realize a limpeza do historico/cache em seu navegador do celular para que possamos fazer um teste completo. Com relação ao media query, vc precisa adaptar cada recurso, como os botões de menu presentes no header.. boxes no layout, navbar.. vc vai construindo de acordo com a proporção... não será apenas uma propriedade ou classe q irá adaptar geral, e sim a adaptação de cada componente conforme necessidade...
    – Neo
    Commented 9/08/2018 às 14:44
  • por exemplo: @media all and (min-width:1px) and (max-width:320px){ .menu-nav li{ width:100% } }
    – Neo
    Commented 9/08/2018 às 14:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .