Como criar grids responsivos com CSS | CSS #01

45
58

Fala galera! Nesse tutorial vou mostrar para você como criar um sistema de Grids resposivos com CSS de forma simples e que pode ser escalado de acordo …

source

45 COMMENTS

  1. Olá, estou aprendendo css e não entendi porque margin-left: -5px;
    margin-right: -5px; na classe row. Quando mencionou que o display: inline-block coloca uma margin automática e foi removido com margin-right: -4px fez sentido, no caso da row porque margin-left: -5px e margin-right-5px?

  2. Muito boa a aula Carlos parabéns.
    Preciso fazer uma pergunta. Eu peguei os códigos, html e css. Salvei o html como index mas fiquei sem saber como salvar corretamente o css. Ele tem que ser salvo em uma pasta css? E na pasta como ficaria? documento.css? Eu uso o Dreamweaver 8 e na hora de ver no navegador não aparece as colunas. Por favor, pode me dar essa ajuda?

  3. Muito boa a aula, mas tenho uma dúvida não entendi os medias queries para por os tamanhos das colunas pq exemplo "col-2" sempre tem 50% de largura, pelo menos é oq se espera, independente da largura da tela né? Então não entendi bem a utilidade e não o código. Muito bom o seu trabalho, parabéns! 🙂

  4. Amigo, boa noite, tudo bem? Eu estou estudando bastante Desenvolvimento Web e já estou conseguindo criar uma landing page e tals, mas na responsividade eu peco. Você teria uma tabela com as larguras dos dispositivos? Quando eu coloco as medias queries para os determinados dispositivos, ele se adapta como no desktop mas não para mobile, consegue entender? Tipo, eu tenho 3 colunas para desktop e tablet, no tablet ele diminui, óbvio, já no mobile (Moto G4) ele fica idêntico o desktop só que certinho na tela. :/

  5. Olá, boa tarde. irmão como faço para inserir esse código no meu site: <a href="javascript:window.open('http://site.org/certificado.php?url=site.com.br', 'c_TW', 'location=no, toolbar=no, width=600, height=670');'>
    <img src="http://site.com.br/selo.php" width='300' border='0'>
    </a>. é código daqueles selos de segurança, que quero colocar no meu site. O meu site tem a opção "Incluir código HTML". Qual é a estrutura que precisa ser feita pra colocar esse código dentro? Me ajude, por favor!

  6. <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Desenvolvendo um Grid System responsivo com CSS</title>
    <link rel="stylesheet" href="grid.css">
    <script type="text/javascript" src="assets/js/script.js"></script>
    </head>

  7. <head>

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <meta charset="UTF-8">
    <title>Desenvolvendo um Grid System responsivo com CSS</title>
    <link rel="stylesheet" href="grid.css">
    <script type="text/javascript" src="assets/js/script.js"></script>
    </head>

    isso mesmo fiz vários teste tem que colocar este código dentro do

  8. olá tudo bem , parabén pelo video , queria saber porque cod nao esta responsivo no cel ele nao adapta a uma col abaixa da outra faltou algum arquivo no < head> tipo

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

  9. Poh, brother, parabéns!!!
    Me amarrei no vídeo, mas que pena que não teve continuidade e só fala sobre PhotoShop agora.
    Seria interessante se você voltasse com essas aulas. estava aprendendo Bootstrap, mas achei que o código fica muito poluído, ai vou fazer do zero mesmo o design responsivo que não é bicho de 7 cabeças.

    Poh, volta aí, volta q vai ser sucesso!! Abçs e parabéns!!

  10. Primeiramente parabéns pelo vídeo e pelo canal. Deu certinho aqui.. por eu ser iniciante em html/css, fiquei com duvida sobre como fazer o reset básico da forma correta, para ele não ter que verificar todo o site. Como não foi demonstrado no vídeo, qual seria a melhor forma de inserir os seguintes códigos:

    *{
    margin: 0;
    paddin:0;
    box-sizing: border-box;
    webkit-etc….
    }

    se puder me dizer sobre o que pesquisar , ou algum link a respeito isso. thx.

LEAVE A REPLY