Entrar Ainda não tem acesso?
3
respostas

Dificuldade no posicionamento dos elementos

Referente ao curso Flexbox: posicione elementos na tela

por Vladmir Vieira de Santana
| 31.6k xp | 16 posts

Estava tendo bastante dificuldade no posicionamento dos elementos do site, fiz algumas alterações no código e melhorou um pouco, porem na parte mobile estou tendo muita dificuldade.

ps: mesmo seguindo as instruções do instrutor os problemas continuaram, tentei ate abrir o site já completo que que fica no final do curso, e o problema continuou, acho que pode ser o meu navegador, eu uso o Operagx, alguém poderia me ajudar com esse problema?

site com as minhas alterações: Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidadesite com código do instrutor: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas
por Carlos Eduardo Da Silva Santos
| 240k xp | 43 posts

Olá Vladimir, boa noite!

*Dúvida sobre a pergunta: *

Não entendi sua pergunta, o que exatamente esta dando erro na hora de ir pro mobile? o que você quer fazer? pode manda o trecho do codigo html e css que esta falhando.

por Vladmir Vieira de Santana
| 31.6k xp | 16 posts

Olá na hora do mobile o posicionamento dos elementos não esta ficando do jeito certo, antes de começar a fazer o mobile eu estava na parte do rodapé e tava dando os mesmos problemas de posicionamento, queria descobrir oque deu errado

html :

            <div class="videoSobre-sobre">
                <h2 class="videoSobre-sobre-title">Vantagens do Alurinha</h2>
                <ul class="videoSobre-sobre-list">
                    <li class="videoSobre-sobre-item">Estude onde quiser</li>
                    <li class="videoSobre-sobre-item">Novos cursos todos os meses</li>
                    <li class="videoSobre-sobre-item">Cursos compatíveis com o mercado</li>
                </ul>
                <button class="videoSobre-button">Cadastre-se já</button>
            </div>
        </div>
    </section>

</main>

<footer class="rodapePrincipal">
    <div class="container-4">

        <section class="rodapePrincipal-navMap">
            <h3 class="subtitulo">Mapa de cursos</h3>
            <nav class="rodapePrincipal-navMap-list">

                <h4 class="navmap-list-title navmap-list-title-backend">Linguagens Backend</h4>
                <a class="rodapePrincipal-navMap-link" href="#">Java</a>
                <a class="rodapePrincipal-navMap-link" href="#">PHP</a>
                <a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
                <a class="rodapePrincipal-navMap-link" href="#">Scala</a>
                <a class="rodapePrincipal-navMap-link" href="#">Python</a>
                <a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
                <a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
                <a class="rodapePrincipal-navMap-link" href="#">Lógica de programação</a>

                <h4 class="navmap-list-title navmap-list-title-frontend">Linguagens Frontend</h4>
                <a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
                <a class="rodapePrincipal-navMap-link" href="#">Desenvolvimento Web</a>
                <a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
                <a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
                <a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
                <a class="rodapePrincipal-navMap-link" href="#">Polymer</a>

                <h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
                <a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
                <a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
                <a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
                <a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
                <a class="rodapePrincipal-navMap-link" href="#">Django</a>
                <a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>

                <h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de dados</h4>
                <a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
                <a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
                <a class="rodapePrincipal-navMap-link" href="#">Postegres</a>

            </nav>
        </section>

    </div>

    <section class="rodapePrincipal-patrocinadores">
        <div class="container-5">
            <ul class="rodapePrincipal-patrocinadores-list">
                <li>
                    <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-alura" href="#">
                        <img src="logos/alura.svg" alt="Logo da Alura">
                    </a>
                </li>
                <li>
                    <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-caelum" href="#">
                        <img src="logos/caelum.svg" alt="Logo da Caelum">
                    </a>
                </li>
                <li>
                    <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-casaDoCodigo" href="#">
                        <img src="logos/cdc.svg" alt="Logo da Casa do Código">
                    </a>
                </li>
            </ul>
por Vladmir Vieira de Santana
| 31.6k xp | 16 posts

Css:.cabecalhoPrincipal, .container { display: flex; align-items: center; justify-content: space-between; }

.cabecalhoPrincipal-nav{ display: flex; }

.container-3{ display: flex; align-items: center; justify-content: space-around; }

.rodapePrincipal-patrocinadores .container-5 { display: flex; justify-content: space-between; }

.rodapePrincipal-patrocinadores-list { display: flex; align-items: center; justify-content: space-around; width: 70%; margin-right: 5%; }

.rodapePrincipal-contatoForm{ width: 25%; }

.rodapePrincipal-contatoForm-fieldset { display: flex; }

.subtitulo{ margin-left: 50px; }

.rodapePrincipal-navMap-list { display: flex; flex-flow: column wrap; height: 250px; margin-left: 50px; }

.conteudoPrincipal-cursos { display: flex; flex-wrap: wrap; }

.conteudoPrincipal-cursos-link { width: 23%; margin: 1%; }

.conteudoPrincipal-cursos-link:nth-child(4n) { margin-right: 0; }

.conteudoPrincipal-cursos-link:nth-child(4n+1) { margin-left: 0; }