Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Dificuldade para adaptar página para responsiva (mobile)

por ANDRE LUIZ SANTOS GOMES
| 60k xp | 10 posts

Esse é meu primeiro projeto que criei no intuito de testar meu aprendizadoDe Html e Css. Conseguem me ajudar a transformar a página abaixo em mobile? vou mandar o html em uma página e o css em outra.

        <main>
            <section class="colorp"> 
            <section class="gamepass">

            <section class= "backgradient"> 

        <img class="gamepass" src="gamepass.jpg">

        <h2 class="titulo-principal">Sua Grande Locadora de Games</h2>

        <p> O <strong>Xbox Game Pass</strong> é um serviço de assinatura da Microsoft para os proprietários de Xbox One ou PC. Ele oferece o acesso a um catálogo de jogos gratuitos, funciona como a Netflix, só que para games. A versão Ultimate do serviço inclui também os benefícios do Xbox Live Gold. Saiba mais abaixo.</p>

        <h2 class="titulo-principal"> O que é Xbox Game Pass? </h2> 

        <p> É um serviço de assinatura que dá acesso a uma biblioteca de jogos sem custo extra, para o Xbox One. A Microsoft diz que são mais de 100 títulos incluídos no catálogo, para toda a família, no momento que escrevi esse post, a lista já conta com 396 games — entre PC e Console.</p>



        <section class = pacote>

            <img class="gamepass3" src="gamepass3.jpg">


        <div class="lista">
        <p>Há três planos do Xbox Game Pass</p>



        <ul class="titulo"> Xbox Game Pass para Console:</ul>
        <li class="preço"> R$ 34,99 ao mês e dá acesso apenas aos jogos para Xbox One</li>
        <ul class="titulo"> Xbox Game Pass Ultimate:</ul>
        <li class="preço"> R$ 44,99 e dá acesso tanto a biblioteca do Xbox One quanto do PC e também inclui os benefícios do Xbox Live Gold.</li>
        <ul class="titulo"> Xbox Game Pass para PC:</ul>
        <li class="preço"> R$ 29,99 por mês, para PC Windows.</li>
    </div>
        </section>

        <h2 class="titulo-principal"> Catálogo Ea Play </h2>

            <img class="eaplay" src="eaplay.jpg">

            <p> O <strong>EA Play</strong> agora está incluído no Xbox Game Pass para PC e Ultimate sem nenhum custo extra. Com o EA Play, desbloqueie o acesso a uma coleção dos jogos mais amados da EA, recompensas no jogo e testes de novos jogos selecionados. </p>

            <p> O serviço é uma grande oportunidade para os fãs da Electronics Arts desfrutarem de grandes sucessos como Battlefield V, Fifa 21, Ufc 4, Star Wars Jedi: Fallen Orde,  The Sims 4, Mass efect: Andromeda, Need For Speed: Pay Back, entre outros titulos da empresa. <p>





        <h2 class="titulo-principal">Vale a pena assinar Xbox Game Pass? </h2>

        <p> Depende. Em um primeiro momento eu diria que sim. Se você é novato no console, certamente deve ter muitos títulos nessa biblioteca que o agradarão — aliás, isso é algo de se deve levar em conta, se os títulos da lista são interessantes para o seu gosto. </p>

        <p>O valor da assinatura do Xbox Game Pass é bem baixo, se comparado ao preço de um jogo individual, o que facilmente chega na casa dos R$ 200. Claro que nem todos do catálogo são títulos na casa dos R$ 200, aqueles de grande orçamento, mas por R$44,99 ao mês dá para acumular muitas horas de gameplay.</p>

        <p> Para conhecer melhor o serviço a Microsoft oferece um super desconto no 1º mês de assinatura. Por apenas R$ 5,00 você pode conhecer melhor o catálogo e ver ser um serviço válido pra você. 


        </section>
    </section>

        </main>
</body>
5 respostas
por ANDRE LUIZ SANTOS GOMES
| 60k xp | 10 posts

Abaixo o Header da página acima e o CSS referente a ela. Estou a dois dias brigando com esse html. Consegui fazer o formato desktop mas não consigo transformá-lo em um arquivo responsivo. Peço ajuda 

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Xbox: Tudo On</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="xbox.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600&display=swap" rel="stylesheet">
    </head>

    <body>
        <header>
            <div class="caixa">
                <h1><img src="xbox logo.jpg">
                </h1>
                <nav>
                    <ul>
                        <li><a href="Consoles.html">Do 32mb ao 4k</a></li>
                        <li><a href="Serviços.html">Tudo On</a></li>
                    </ul>
                </nav>
            </div>
        </header>




body {font-family: 'Cinzel', serif;}

header {
    background: green;
    width: 100%;
    margin: auto}


.caixa {position: relative; }

nav {position: absolute;
top: 25px; }

nav li {
    display: inline;
    margin: 0 0 0 400px;}

nav a {text-transform: uppercase;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;}

.worlds-await {background: #000000;} 

.gamestudios {width: 900px; width: 100%; height: 280px}


.titulo-principal {padding: 1em 0;
font-size: 32px;
text-transform: uppercase;
color: green;
font-weight: bold;
text-shadow: 1px 1px green;
text-align: center}


.worlds-await p {padding: 5px 200px 10px 200px; }

.worlds-await {color: #e6f0e6}

.primeiro {width:600px; margin: 0 0 0 300px;}

.first p {padding: 2em 200px 2em 200px; 
    color: #ffffff;}

.video {margin: 0 0 0 350px;}

.Second360 {width:600px; margin: 0 0 0 300px;}

#anel {width:600px; margin: 20px 0 30px 330px;}

.begingradient {background: linear-gradient(black,gray,black);}

.gamestudios2 {width: 900px; width: 100%; height: 280px; background: black;}

.video2 {display: inline; padding: 0 0 0 200px}

.video3 {display: inline; padding: 0 0px 0 100px}

.p strong {font-weight: bold;}


/*Página Serviço*/

.gamepass {width: 100%; 
    height: 450px}

.pacote {display: inline-flex; 
    align-items: center;}

.gamepass3{width: 420px; 
    height: 250px;
    padding: 1em 0 0 0;
    }

.gamepass3:hover {box-shadow: 0.2em 0.2em black; transition: 2s}

.pack  {font-size: 18px; }

.lista {position: static; 
    margin: 0 0 0 2em; 
    line-height: 2.0; 
    padding: 1em 0 0 0; 
    color: white}

.eaplay {width: 100%; 
    height: 400px;padding: 0 0 30px 0}

.backgradient {background: linear-gradient(black, gray)}

.colorp p {color: white;
    padding: 5px 200px 10px 200px;}

@media screen and (max-width: 500px){
.caixa, .colorp, .gamepass, .titulo-principal, .pacote, .catalogo, .gamepass3, .textcatálogo, .valep{ 
        width:95%; 
} 

        nav li {display:inline-flex; margin: 0 0px 0 120px; 
        }

        .titulo-principal p {padding: 0 200px 0 }

        nav a {padding-left: 100px}

        .colorp {text-align: center; width: 95%}
}
por Giovanna Moeller
| 624.1k xp | 892 posts
Instrutor iOS Software Engineer

Oi Andre Luiz, tudo bem?

Primeiramente, desculpe a demora para responder!

Para conseguir te auxiliar melhor nessa questão, você poderia por gentileza mandar as imagens utilizadas nesse projeto? É difícil desenvolver sem elas! Você pode subir as imagens em algum serviço como imgur, ou até mesmo subir tudo no github e me mandar o link aqui do repositório.

Fico no aguardo! Obrigada =) Bons estudos!

por ANDRE LUIZ SANTOS GOMES
| 60k xp | 10 posts

Boa tarde Giovanna,

Segue o link da página em questão no GitHub https://github.com/alsgomes21/First-Steps. A página em si está do meu gosto, só não consegui adaptá-la para mobile.

Desde já agradeço o suporte.

por Giovanna Moeller
| 624.1k xp | 892 posts
Instrutor iOS Software Engineer

Oi André, obrigada pelo retorno!

Bom, primeiramente o que eu vejo a necessidade é diminuir o padding dos textos, pois ele está enxugando muito e tornando bastante compacto, dificultando a leitura, veja a imagem abaixo:

Imagem mostrando a dificuldade de leitura com o padding

Para isso, o que eu fiz foi tirar o padding, veja abaixo como estava antes:

.colorp p {
    color: white;
    padding: 5px 200px 10px 200px;
}

O ideal seria removermos esse padding de 200px e colocar um valor menor, como por exemplo:

.colorp p {
    color: white;
    padding: 20px;
}

Se você acha que o texto está muito grande, ou seja, ocupando muito o espaço, você pode fazer essa modificação:

.colorp p {
    color: white;
    padding: 20px;
    max-width: 70%;
    margin: 0 auto;
}

Isso vai fazer com que o texto ocupe, no máximo, 70% da página total, e também fique alinhado ao centro. Pois com o margin: 0 auto;, ele irá ter 0px de margem na vertical e margem automática na horizontal, fazendo com que se alinhe no centro.

Outro ponto também é na classe pacote, que você tem uma imagem do lado de um texto. Nesse caso, o ideal seria quando for mobile, a imagem ficar em cima e o texto embaixo, e fazemos isso dessa forma:

Na versão desktop (o ideal mesmo seria apenas display: flex; e não display: inline-flex;):

.pacote {
    display: flex;
    align-items: center;
}

Agora, na versão mobile:

@media screen and (max-width: 650px) {
    .pacote {
        flex-direction: column;
    }
}

Sendo assim, quando o dispositivo for menor que 650px ele irá fazer a modificação (coloquei 650px pois achei necessário dessa forma, estava atrapalhando um pouco já nesse tamanho). A modificação no caso é que ele irá transformar essa section em uma coluna, ou seja, um item embaixo do outro. Por isso a imagem fica em cima e o texto fica embaixo.

Acho que dessa forma eu consegui te auxiliar em tornar a página um pouco mais responsiva. Me retorne aqui qualquer coisa, se houver quaisquer dúvidas ou até mesmo outra modificação que você ache necessária, estou aqui para ajudar!

Espero ter ajudado, bons estudos =)

solução!
por ANDRE LUIZ SANTOS GOMES
| 60k xp | 10 posts

Ajudou bastante Giovanna,

Fiz da forma que vc me orientou e consegui alinhar da forma mobile também a minha segunda página. Muito obrigado mesmo.

At.te André Gomes