0

Bom dia, gostaria de uma ideia para criar um estilo css que organize minha tag <Article> contendo Img e Divs na posição horizontal em resoluções maiores.

Segue meu código completo e css.

/** CONFIGURAÇÕES PADRÃO **/
* {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  border: none;
  outline: none;
  box-sizing: border-box;
}

.Personalizado{
    padding-top:0px;
}

a {
  text-decoration: none !important;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

.radius{
  border-radius: 5%;
}

.Estilo{
  width: 100%;
  float: left;
  padding: 3% 4%;
  text-align: center;
  margin-top: 10px;
}

.text-center .img-responsive {
    margin: 0 auto;
}

/** BACKGROUNDS **/
.bgGradient{
	background: linear-gradient(to right, #2796c3, #86dafc);
}

.bgBlack{
	background-color: #000;
}

.bgWhite{
  background-color: #FFF;
}

.bgGray{
	background-color: #e6e6e6
}

/** CABEÇALHO **/
.cabecalho{
  width: 100%;
  float: left;
  padding: 1% 2%;
  text-align: center;
  margin-top: 0px;
}

.btClose{
  font-size: 1.5em;
  color: #FFF;
  float: right;
  cursor: pointer;
  margin: 2%  3% 0 0;
}

.logo{
  width: 56px;
  height: 56px;
  float: left;
  background: url(../img/Logo-Mobile.png) center center/56px no-repeat;
}

.btMenu{
  width: 56px;
  height: 56px;
  float: right;
  border-radius: 56px;
  color: #FFF;
  cursor: pointer;
  text-align: center;
  font-size: 1.5em;
}

.menu{
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  z-index: 100;
}

.menu,ul{
  width: 100%;
  float: left;
  text-align: center;

}

.menu,ul,li{
  padding: 1%;  
}

.menu,ul,li,a{
  font-size: 1.5em;
  color: #FFF;
}

/** PRINCIPAL **/
.conteudo{
  width: 100%;
  text-align: center;
  margin-bottom: 3%;
}

.conteudo,img{
  border-radius: 10px 10px 0px 0px;
}

.conteudo,.textos{
  padding: 7%;
}

.conteudo,.textos,h4{
  font-size: 2em;
  color: #000;
  font-weight: bold;
  margin-top: 1%;
}

.box {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.box img {
  width: 100px;
  height: 100px;
}

/** RODAPE **/
.rodape{
	width: 100% !important;
	float: left !important;
	padding: 1% 1% !important;
	text-align: center !important;
	margin-top: 10px !important;
}

.direitos{
	color: #FFF;
	opacity: 0.7;
}

@media screen and (max-width: 850px){
  
  /** CABEÇALHO **/
  .btMenu{
    display: none !important;
  }

  .box {
    flex-direction: row;
  }

}

@media screen and (max-width: 480px){

  /** TEXTO INTERNO CAROUSEL **/
  .textCarousel{
    font-size: 1em;
  }

  @media screen and (min-width: 850px){

  }

}


  

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- CONTEÚDO -->
<main class="Estilo bgGray">

	<article class="conteudo bgWhite">

<section class="box">
		<img class="img-thumbnail img-responsive" class="center-block" src="img/principal/desenvolvimento.jpg">

		<div class="text-center">
			<h3><strong>DESENVOLVIMENTO</strong></h3>
			<p class="h5">Planejamento, Criação e Desenvolvimento de Soluções WEB para o seu Negócio...</p>
		</div>
</section>
<br>
<section class="box">
		<img class="img-thumbnail img-responsive" class="center-block" src="img/principal/manu.jpg">

		<div class="text-center">
			<h3><strong>ASSISTÊNCIA TÉCNICA</strong></h3>
			<p class="h5">Montagem e Manutenção de Computadores, Notebooks e Impressoras...</p>
		</div>
</section>
<br>
<section class="box">
		<img class="img-thumbnail img-responsive" class="center-block" src="img/principal/CFTV.jpg">

		<div class="text-center">
			<h3><strong>SISTEMAS CFTV</strong></h3>
			<p class="h5">Você já ouviu falar que prevenir é melhor que remediar? Quando tratamos de segurança patrimonial, essa regra é indispensável. Por isso, o Sistema de CFTV (Circuito Fechado de Televisão) é um aliado tão importante no seu projeto de proteção...</p>
		</div>
</section>

	</article>

</main>
<!-- FIM DO CONTEÚDO -->

0

1 Resposta 1

3

Vc pode fazer usando flex e um @media para determinar que em telas menores de 850px por exemplo o conteúdo vai ficar dentro de um box em column, e se for maior que 850px o box fica em row. E nesse regra dentro do @media vc decide quantas colunas vc quer são 3 como fiz width: calc(100% / 3); ou se quiser duas vc troca o 3 por 2 aqui width: calc(100% / 2);

inserir a descrição da imagem aqui

.conteudo {
  display: flex;
  flex-wrap: wrap;
}
.box {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.box img {
  width: 100px;
  height: 100px;
}

@media screen and (min-width:850px) {
  .box {
    flex-direction: row;
    width: calc(100% / 3);
  }
}
<!-- CONTEÚDO -->
<main class="Estilo bgGray linha">

  <article class="conteudo bgWhite">

    <section class="box">
      <img src="https://placecage.com/100/100">

      <div class="text-center">
        <h3><strong>DESENVOLVIMENTO</strong></h3>
        <p class="h5">Planejamento, Criação e Desenvolvimento de Soluções WEB para o seu Negócio...</p>
      </div>
    </section>

    <br>

    <section class="box">
      <img src="https://placecage.com/100/100">

      <div class="text-center">
        <h3><strong>ASSISTÊNCIA TÉCNICA</strong></h3>
        <p class="h5">Montagem e Manutenção de Computadores, Notebooks e Impressoras...</p>
      </div>
    </section>

    <br>

    <section class="box">
      <img src="https://placecage.com/100/100">

      <div class="text-center">
        <h3><strong>SISTEMAS CFTV</strong></h3>
        <p class="h5">Você já ouviu falar que prevenir é melhor que remediar? Quando tratamos de segurança patrimonial,
          essa regra é indispensável. Por isso, o Sistema de CFTV (Circuito Fechado de Televisão) é um aliado tão
          importante no seu projeto de proteção...</p>
      </div>
    </section>

  </article>

</main>
<!-- FIM DO CONTEÚDO -->

7
  • Perfeito, é exatamente o que eu queria.
    – NCesar
    Commented 15/03/2019 às 14:15
  • Tive um equívoco, na verdade eu gostaria que cada section ficasse uma ao lado da outra entende? Em uma linha horizontal para telas maiores de 850px. Ao contrário(menores que 850px) ela ficaria igual você fez mesmo! Pode me ajudar novamente?
    – NCesar
    Commented 15/03/2019 às 14:24
  • Acredito que ao invés de fazer 3 Section, fazendo somente uma com todo conteudo dentro deve dar certo. Vou tentar depois do almoço, Obrigado da mesma forma
    – NCesar
    Commented 15/03/2019 às 14:36
  • @NCesar vou dar uma alterada no código, não é complicado ajustar isso. Logo edito a resposta com o ajuste e te falo
    – hugocsl
    Commented 15/03/2019 às 14:52
  • @NCesar resposta editada, se eu entendi era isso que vc queria...
    – hugocsl
    Commented 15/03/2019 às 15:23

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 .