Jump to content

Recommended Posts

Olá, Gostaria de saber como eu poderia fazer para que o grid com uma linha que contem uma imagem maior posse comportar duas menores a sua frente!
Exemplo de como está:
364250158_Capturar_Easy-Resize.com(1).jpg.036017aa76a3e20135fa2bbda32fc0c5.jpg<--AUMENTOU A DIV!
Exemplo de como eu gostaria que ficasse:
2063037885_Capturar2_Easy-Resize.com(1).jpg.fa3fafaa55527835559dd7aee0b872fe.jpg
Codigo Usado: (Bootstrap)

Spoiler

<div class="row">
  <div class="card offerCard sunny-morning-gradient text-center col-sm-8"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/493340/capsule_616x353.jpg?t=1522169653"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/480490/capsule_616x353.jpg?t=1529609383"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/480490/capsule_616x353.jpg?t=1529609383"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/365590/capsule_616x353.jpg?t=1513590468"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/365590/capsule_616x353.jpg?t=1513590468"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/365590/capsule_616x353.jpg?t=1513590468"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/365590/capsule_616x353.jpg?t=1513590468"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/365590/capsule_616x353.jpg?t=1513590468"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/365590/capsule_616x353.jpg?t=1513590468"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-sm-8"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/493340/capsule_616x353.jpg?t=1522169653"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
</div>

 

 

Share this post


Link to post
Share on other sites
Em 23/06/2018 at 15:11, JoaoVituBR disse:

Olá, Gostaria de saber como eu poderia fazer para que o grid com uma linha que contem uma imagem maior posse comportar duas menores a sua frente!
Exemplo de como está:
364250158_Capturar_Easy-Resize.com(1).jpg.036017aa76a3e20135fa2bbda32fc0c5.jpg<--AUMENTOU A DIV!
Exemplo de como eu gostaria que ficasse:
2063037885_Capturar2_Easy-Resize.com(1).jpg.fa3fafaa55527835559dd7aee0b872fe.jpg
Codigo Usado: (Bootstrap)

  Ocultar conteúdo


<div class="row">
  <div class="card offerCard sunny-morning-gradient text-center col-sm-8"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/493340/capsule_616x353.jpg?t=1522169653"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/480490/capsule_616x353.jpg?t=1529609383"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/480490/capsule_616x353.jpg?t=1529609383"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/365590/capsule_616x353.jpg?t=1513590468"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/365590/capsule_616x353.jpg?t=1513590468"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/365590/capsule_616x353.jpg?t=1513590468"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/365590/capsule_616x353.jpg?t=1513590468"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/365590/capsule_616x353.jpg?t=1513590468"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-md-4"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/365590/capsule_616x353.jpg?t=1513590468"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
  <div class="card offerCard sunny-morning-gradient text-center col-sm-8"><a href="#">
    <img src="https://steamcdn-a.akamaihd.net/steam/apps/493340/capsule_616x353.jpg?t=1522169653"/>
    <div>
          <l class="discount">-50%</l> <strike>R$10.00</strike> R$5.00
    </div></a>
  </div>
</div>

 

 

olá amigo ja viu a nova ferramenta da mozila firefox ja tem la designer grid pelo modo desenvolvedor vale a pena experimentar 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By laedsonfln
      Pessoal, boa noite!
       
       
      Gostaria de mostrar 3 colunas e 6 produtos no celular utilizando o shortcode do woocommerce na página principal. 
      Criei um site de Brechó pra minha namorada usando o Wordpress + woocommerce. Tentei usar os shortcodes do woocommerce para chamar os produtos pra página principal. Até aqui tudo bem, porém quando acesso o site pelo celular a loja mostra duas colunas mesmo eu utilizando [products limit="6" columns="3"]. Procurei bastante nas internet e o que eu consegui foi copiar o HTML usando o inspector do google e inserindo num bloco do Elementor (construtor de página que uso) e mudando algumas coisinhas no código. A primeira vista está funcionando mas quando acrescento um produto ele não atualiza no celular porque não é um shortcode.  Alguém pode me ajudar? Sou iniciante na programação. Segue o site: www.brechodaelyevariedades.com.br 
       
      Obrigado! 
    • By lukaizh
      Olá Galera,
       
      Estou iniciando um e-commerce pela Tray,e não entendo muito bem de css 
      eu gostaria de saber se tem como eu mudar o menu lateral esquerdo, para deixar ele na horizontal.
       
      e teria mais uma dúvida, se há alguma maneira de importar o site para o photoshop e depois pegar o css das camadas.
    • By Jack Oliveira
      Ola pessoal quero tirar uma duvida aqui não sei se seria possível isso o que eu quero
       
         Teria como fazer um compartilhamento no whatsapp e no grupo do facebook ou seja este grupo seria o meu <-- seria o ex: apenas de ser meu grupo
       Bom eu tenho um arquivo chamado listagem.php
      dentro dele esta todas as informações para as pessoas verem
      e seria esta listagem.php que gostaria que ela fosse compartilhada em determinado tempo
      Dentro das meta ja tem os link para ser compartilhando a onde querer etc..
        Porem como eu disse quero definir para ele compartilhar AUTOMATICAMENTE
      Sei que o código a baixo tem nada a ver com que eu falei ai..
      Ex:
       
      <!-- ==================================================================================================================================== --> <!-- This site is optimized with the Yoast SEO --> <title><?php echo $dados["_nome"];?> - <?php echo ConfigPainel('site_cid'); ?> - <?php echo ConfigPainel('site_nome'); ?></title> <!-- ==================================================================================================================================== --> <link rel="canonical" href="<?php echo ConfigPainel('site_url'); ?>/<?php echo ConfigPainel('site_cid'); ?>/listagem/<?php echo $dados['id']; ?>/<?php echo encodeSEOString($dados['_nome']); ?>" /> <!-- ==================================================================================================================================== --> <link rel="publisher" href="https://www.facebook.com/<?php echo ConfigPainel('facebook_url'); ?>/"/> <!-- ==================================================================================================================================== --> <meta property="og:locale" content="pt_BR" /> <!-- ==================================================================================================================================== --> <meta property="og:type" content="article" /> <!-- ==================================================================================================================================== --> <meta property="og:title" content="<?php echo $dados["_nome"];?> - <?php echo ConfigPainel('site_cid'); ?> | <?php echo ConfigPainel('site_nome'); ?>" /> <!-- ==================================================================================================================================== --> <meta property="og:description" content="<?php echo $dados["_frase"];?>" /> <!-- ==================================================================================================================================== --> <meta property="og:url" content="<?php echo ConfigPainel('site_url'); ?>/<?php echo ConfigPainel('site_cid'); ?>/listagem/<?php echo $dados['id']; ?>-<?php echo encodeSEOString($dados['_nome']); ?>" /> <!-- ==================================================================================================================================== --> <meta property="og:site_name" content="Ligue Certo" /> <!-- ==================================================================================================================================== --> <meta property="article:publisher" content="https://www.facebook.com/<?php echo ConfigPainel('facebook_url'); ?>/" /> <!-- ==================================================================================================================================== --> <meta property="article:author" content="https://www.facebook.com/PROGRAMADOR" /> <!-- ==================================================================================================================================== --> <meta property="fb:app_id" content="***********" /> <!-- ==================================================================================================================================== --> <meta property="og:image" content="<?php echo ConfigPainel('site_url'); ?>/<?php echo ConfigPainel('site_cid'); ?>/images/<?php echo $dados["imagem"];?>" /> <!-- ==================================================================================================================================== --> <meta property="og:image:secure_url" content="<?php echo ConfigPainel('site_url'); ?>/<?php echo ConfigPainel('site_cid'); ?>/images/<?php echo $dados["imagem"];?>" /> <!-- ==================================================================================================================================== --> <meta property="og:image:width" content="200" /> <!-- ==================================================================================================================================== --> <meta property="og:image:height" content="200" /> <!-- ==================================================================================================================================== --> <meta name="twitter:card" content="summary" /> <!-- ==================================================================================================================================== --> <meta name="twitter:description" content="<?php echo $dados["_frase"];?>" /> <!-- ==================================================================================================================================== --> <meta name="twitter:title" content="<?php echo $dados["_nome"];?> - <?php echo ConfigPainel('site_url'); ?>/<?php echo ConfigPainel('site_cid'); ?> | <?php echo ConfigPainel('site_nome'); ?>" /> <!-- ==================================================================================================================================== --> <meta name="twitter:site" content="@liguecerto" /> <!-- ==================================================================================================================================== --> <meta name="twitter:image" content="<?php echo ConfigPainel('site_url'); ?>/<?php echo ConfigPainel('site_cid'); ?>/images/<?php echo $dados["imagem"];?>" /> <!-- ==================================================================================================================================== --> <meta name="twitter:creator" content="@nome-site" /> <!-- ==================================================================================================================================== --> Nesta compartilhamento pelo whatsapp quero que ele compartilha no numero que foi cadastro que seria do cliente da pagina
      ex: 
      https://api.whatsapp.com/send?phone=55<?php echo $celular; ?>&text=" Ola! quero que quando for feitos os cadastros pelo painel eu definir o tempo de que será feito o compartilhamento
      Ex:
      Cliente 01 <-- ele será compartilhado no whatsapp de 3 em 3 dias de 4 a 4 horas porem os seu horario sera definido
      Se for no whatsapp ele ser compartilhando apenas nos horarios de 07:00 ao 19:00 das 20:00 a 06:00 não compartilhar
      Já no Grupo do Facebook <-- Compartilhar de 2 em 2 dias de 3 a 3 horas das 06:00 as 06:00
       
      Cliente 02 <-- ele será compartilhado no whatsapp de 4 em 4 dias de 4 a 4 horas porem os seu horario sera definido
      Se for no whatsapp ele ser compartilhando apenas nos horarios de 07:00 ao 19:00 das 20:00 a 06:00 não compartilhar
      Já no Grupo do Facebook <-- Compartilhar de 3 em 3 dias de 3 a 3 horas das 06:00 as 06:00
       
      Cliente 03 <-- ele será compartilhado no whatsapp de 5 em 5 dias de 4 a 4 horas porem os seu horario sera definido
      Se for no whatsapp ele ser compartilhando apenas nos horarios de 07:00 ao 19:00 das 20:00 a 06:00 não compartilhar
      Já no Grupo do Facebook <-- Compartilhar de 4 em 4 dias de 3 a 3 horas das 06:00 as 06:00
       
      Cliente 04 <-- ele será compartilhado no whatsapp de 8 em 8 dias de 4 a 4 horas porem os seu horario sera definido
      Se for no whatsapp ele ser compartilhando apenas nos horarios de 07:00 ao 19:00 das 20:00 a 06:00 não compartilhar
      Já no Grupo do Facebook <-- Compartilhar de 5 em 5 dias de 3 a 3 horas das 06:00 as 06:00
       
      Seria mais o menos isso ai galera desculpe que ficou um carnaval de cores, mais era apenas pra dar uma definição em cada um com seus tempo..
       
        Se isso for realmente possível poderia me ajudar a fazer este código
      Eu imagino que isso seria com JAVASCRIPT e eu não tenho um bom conhecimento com javascript...
       
         Espero que vocês tenha conseguido entender a minha logica ai
    • By marcelobbt
      Estava tentando criar um leiaute com o formato GRID, mas me deparei com um problema. Não consigo colocar DIV dentro de uma DIV do leiaute do GRID.
       
      Queria saber como faço isso. Abaixo segue exemplo onde no div "col2" queria colocar duas div, uma do lado da outra:
       
      CSS
      .gridcontainer { display: grid; justify-content: center; grid-template-columns: 1fr 3fr 3fr 3fr 1fr; grid-gap: 3px; } .gridcontainer > div { /*text-align: center;*/ padding: 10px; /*font-size: 20px;*/ } .esquerda { grid-row: 1 / 5; } .direita { grid-row: 1 / 5; grid-column: 5 / 5; } .principal { grid-column: 2 / 5; background-color: #ffffff; padding-left: 10px; } HTML
      <div class="gridcontainer"> <div class="principal"> <p>texto</p> </div> <div class="col1"> <p>texto</p> </div> <div class="col2"> <div class="esquerda"> <img src="..."> <p>Imagem legenda</p> </div> <div class="direita"> <p>Texto</p> </div> </div> </div>  
       
       
    • By MayraAmaral
      HTML
       
      <!DOCTYPE hmtl>
      <html lang="pt-br">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>DaHora Software</title>
          <link rel="stylesheet" href="css/styles.css">
          
          <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
          
          
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
          <script type="text/javascript">
          jQuery(document).ready(function(){
          jQuery("#subirTopo").hide();
          jQuery('a#subirTopo').click(function () {
                   jQuery('body,html').animate({
                     scrollTop: 0
                   }, 800);
                  return false;
             });
          jQuery(window).scroll(function () {
                   if (jQuery(this).scrollTop() > 200) {
                      jQuery('#subirTopo').fadeIn();
                   } else {
                      jQuery('#subirTopo').fadeOut();
                   }
               });
          });
          </script>

      </head>
          
      <body>
          <header>
              
              <input type="checkbox" id="btn-menu">
              <label for="btn-menu"><img src="img/menu_icon_verde.png" width="30" height="30"></label>
                  
              <div class="logo">
                  <a href="#"><img src="img/logo.png" width="250" height="150"></a>
              </div>
              
                  <nav class="menu"> 
                      <ul>
                          <li><a href="#empresa">NOSSA EMPRESA</a></li>
                          <li><a href="#cursos">CURSOS</a></li>
                          <li><a href="#sites">SITES</a></li>
                          <li><a href="#sistemas">SISTEMAS</a></li>
                          <li><a href="#contato">FALE CONOSCO</a></li>
                      </ul>
                  </nav>
              
          </header>
          
          <div class="empresa">
              <h1 id="empresa"> NOSSA EMPRESA </h1>
          
          </div>
          
          <div class="cursos">
              <h1 id="cursos"> CURSOS </h1>
          
          </div>
          
          <div class="sites">
              <h1 id="sites"> SITES </h1>
          
          </div>
          
          <div class="sistemas">
              <h1 id="sistemas"> SISTEMAS </h1>
          
          </div>
          
          <div class="contato">
              <h1 id="contato"> FALE CONOSCO </h1>
          
          </div>
          
          <footer>
              <a id="subirTopo"> <img src="img/seta.png"” alt=”some text”  width="100" height="100">
                  </a>
          </footer>
      </body>
      </html>
       
      CSS
       
      *{
          margin: 0;
          padding: 0;
      }
      body{
          font-family: 'Poppins', sans-serif;
      }
      header{
          width: 100%;
          height: 150px;
          background-color: black;
      }
      #btn-menu{
          display: none;
      }
      header label{
          display: none;
          width: 30px;
          height: 30px;
          padding: 10px;
          border-right: 1px solid green;
      }
      header label:hover{
          cursor: pointer;
          background: rgba(0,0,0,0.3);
      }
      .menu ul{
          margin: 0;
          list-style: none;
          padding: 0;
          display: flex;
          justify-content: flex-end;
          align-items: flex-end;
          
      }
      .titulo li a{
          font-family: 'Alfa Slab One', cursive;
          font-size: 50pt;
          text-decoration: none;
          color: darkgreen;
          padding: 50px 50px;
      }
      .menu li{
          border-right: 1px solid #fff;
      }
      .menu li a{
          display: block;
          padding: 15px 20px;
          color: #fff;
          text-decoration: none;
          font-family: 'Alfa Slab One', cursive;
          font-size: 12pt;
      }
      . menu li:hover{
           background: rgba(0,0,0,0.3);
      }
      a img{
          display: inline-flex;
      }
      @media (max-width:768px){
          header label{
              display: block;
          }
          
          .menu{
              position: absolute;
              background-color: #000;
              width: 70%;
              margin-left: -70%;
              transition: all 0.5s;
          }
          
          .menu ul{
              flex-direction: column;
          }
          
          .menu li{
              border-top: 1px solid #fff;
          }
          .logo a{
              justify-content: center;
              align-items: center;
              display: inline-flex;
          }
          
          header{
          height: 50px;
          background-color: black;
          }
          
          #btn-menu:checked - .menu {
              margin-right: 70px;
          }
      }
      /*
      a{
          margin: 20px;
          color: #fff;
          text-decoration:none; 
          font-family: font-family: 'Staatliches', sans-serif;
          font-size: 18pt;
      }
      */
      .empresa{
          background-color: #fff;
          width: auto;
          height: 500px;
          display: flex;
          padding: 0px 50px;
      }
      .cursos{
          background-color: #8FBC8F;
          width: auto;
          height: 500px;
          padding: 0px 50px;
      }
      .sites{
          background-color: #fff;
          width: auto;
          height: 500px;
          padding: 0px 50px;
      }
      .sistemas{
          background-color: #8FBC8F;
          width: auto;
          height: 500px;
          padding: 0px 50px;
      }
      .contato{
          background-color: #fff;
          width: auto;
          height: 500px;
          padding: 0px 50px;
      }

      footer{
          background-color: #000000;
          width: auto;
          height: 200px;
          padding: 0px 50px;
      }
      #subirTopo {
          background-repeat: no-repeat;
          bottom: 20px;
          right: 20px;
          cursor: pointer;
          padding: 0px;
          position: fixed;
      }
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.